Featured image of post Angular Cheatsheet

Angular Cheatsheet

Angular Cheatsheet

ConceptSyntax/ExampleDescription
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, ngStyleCommon built-in directives
Services@Injectable({ providedIn: 'root' })Defines a service for dependency injection
Dependency Injectionconstructor(private service: MyService) { }Injects a service into a component or other service
RoutingRouterModule.forRoot(routes)Configures routing for an Angular application
Module@NgModule({ declarations: [...], imports: [...] })Defines an Angular module
Lifecycle HooksngOnInit(), ngOnDestroy(), ngAfterViewInit()Lifecycle hooks for components
Pipes`{{ valuepipe }}`Transforms data in templates using pipes
Custom Pipes@Pipe({ name: 'myPipe' })Defines a custom pipe
FormsReactiveFormsModule, FormBuilder, FormGroup, FormControlHandling forms with reactive forms
HttpClientHttpClientModule, 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