Component | @Component({ selector: 'app-root', ... }) | Defines an Angular component | |
Template | <h1>{{title}}</h1> | Defines the HTML template for a component | |
Interpolation | {{ expression }} | Binds data to the template using double curly braces | |
Property Binding | [property]="expression" | Binds a property of an HTML element to an expression | |
Event Binding | (event)="handler" | Binds an event of an HTML element to an event handler | |
Two-way Binding | [(ngModel)]="property" | Binds a property to a form input for two-way data binding | |
Directive | @Directive({ selector: '[appDirective]' }) | Defines a custom directive | |
Built-in Directives | *ngIf , *ngFor , *ngSwitch , ngClass , ngStyle | Common built-in directives | |
Services | @Injectable({ providedIn: 'root' }) | Defines a service for dependency injection | |
Dependency Injection | constructor(private service: MyService) { } | Injects a service into a component or other service | |
Routing | RouterModule.forRoot(routes) | Configures routing for an Angular application | |
Module | @NgModule({ declarations: [...], imports: [...] }) | Defines an Angular module | |
Lifecycle Hooks | ngOnInit() , ngOnDestroy() , ngAfterViewInit() | Lifecycle hooks for components | |
Pipes | `{{ value | pipe }}` | Transforms data in templates using pipes |
Custom Pipes | @Pipe({ name: 'myPipe' }) | Defines a custom pipe | |
Forms | ReactiveFormsModule , FormBuilder , FormGroup , FormControl | Handling forms with reactive forms | |
HttpClient | HttpClientModule , HttpClient.get() , HttpClient.post() | Making HTTP requests | |
Guards | @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate {} | Defines route guards for authentication and authorization | |
Animations | @Component({ animations: [ trigger('animation', [ state('state', style({ ... })), transition('...', animate('...')) ]) ] }) | Adds animations to components | |