Bootstrapping | Details |
---|---|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; | Import platformBrowserDynamic from @angular/platform-browser-dynamic . |
platformBrowserDynamic().bootstrapModule(AppModule); | Bootstraps the application, using the root component from the specified NgModule . |
NgModules | Details |
---|---|
import { NgModule } from '@angular/core'; | Import NgModule from @angular/core . |
@NgModule({ declarations: …, imports: …, exports: …, providers: …, bootstrap: … }) class MyModule {} | Defines a module that contains components, directives, pipes, and providers. |
declarations: [ MyRedComponent, MyBlueComponent, MyDatePipe ] | List of components, directives, and pipes that belong to this module. |
imports: [ BrowserModule, SomeOtherModule ] | List of modules to import into this module. Everything from the imported modules is available to declarations of this module. |
exports: [ MyRedComponent, MyDatePipe ] | List of components, directives, and pipes visible to modules that import this module. |
providers: [ MyService, { provide: … } ] | List of dependency injection providers visible both to the contents of this module and to importers of this module. |
bootstrap: [MyAppComponent] | List of components to bootstrap when this module is bootstrapped. |
Template syntax | Details |
---|---|
<input [value]="firstName"> | Binds property value to the result of expression firstName . |
<div [attr.role]="myAriaRole"> | Binds attribute role to the result of expression myAriaRole . |
<div [class.extra-sparkle]="isDelightful"> | Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful . |
<div [style.width.px]="mySize"> | Binds style property width to the result of expression mySize in pixels. Units are optional. |
<button (click)="readRainbow($event)"> | Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object. |
<div title="Hello {{ponyName}}"> | Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: <div [title]="'Hello ' + ponyName"> |
<p> Hello {{ponyName}} </p> | Binds text content to an interpolated string, for example, "Hello Seabiscuit". |
<my-cmp [(title)]="name"> | Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event"> |
<video #movieplayer …></video> <button (click)="movieplayer.play()"> Play </button> | Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template. |
<p *myUnless="myExpression"> … </p> | The asterisk (* ) character turns the current element into an embedded template. Equivalent to: <ng-template [myUnless]="myExpression"> <p> … </p> </ng-template> |
<p> Card No.: {{cardNumber | myCardNumberFormatter}} </p> | Transforms the current value of expression cardNumber using the pipe called myCardNumberFormatter . |
<p> Employer: {{employer?.companyName}} </p> | The safe navigation operator (? ) means that the employer field is optional and if undefined , the rest of the expression should be ignored. |
<svg:rect x="0" y="0" width="100" height="100"/> | An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component. |
<svg> <rect x="0" y="0" width="100" height="100"/> </svg> | An <svg> root element is detected as an SVG element automatically, without the prefix. |
Built-in directives | Details |
---|---|
import { CommonModule } from '@angular/common'; | Import CommonModule from @angular/common . |
<section *ngIf="showSection"> | Removes or recreates a portion of the DOM tree based on the showSection expression. |
<li *ngFor="let item of list"> | Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list. |
<div [ngSwitch]="conditionExpression"> <ng-template [ngSwitchCase]="case1Exp"> … </ng-template> <ng-template ngSwitchCase="case2LiteralString"> … </ng-template> <ng-template ngSwitchDefault> … </ng-template> </div> | Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression . |
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}"> | Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map. |
<div [ngStyle]="{'property': 'value'}"> <div [ngStyle]="dynamicStyles()"> | Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component. |
Forms | Details |
---|---|
import { FormsModule } from '@angular/forms'; | Import FormsModule from @angular/forms . |
<input [(ngModel)]="userName"> | Provides two-way data-binding, parsing, and validation for form controls. |
Class decorators | Details |
---|---|
import { Directive, … } from '@angular/core'; | Import Directive, … from @angular/core'; . |
@Component({…}) class MyComponent() {} | Declares that a class is a component and provides metadata about the component. |
@Directive({…}) class MyDirective() {} | Declares that a class is a directive and provides metadata about the directive. |
@Pipe({…}) class MyPipe() {} | Declares that a class is a pipe and provides metadata about the pipe. |
@Injectable() class MyService() {} | Declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere. |
Directive configuration | Details |
---|---|
@Directive({ property1: value1, … }) | Add property1 property with value1 value to Directive. |
selector: '.cool-button:not(a)' | Specifies a CSS selector that identifies this directive within a template. Supported selectors include element , [attribute] , .class , and :not() . Does not support parent-child relationship selectors. |
providers: [ MyService, { provide: … } ] | List of dependency injection providers for this directive and its children. |
Component configuration @Component extends @Directive , so the @Directive configuration applies to components as well | Details |
---|---|
viewProviders: [MyService, { provide: … }] | List of dependency injection providers scoped to this component's view. |
template: 'Hello {{name}}' templateUrl: 'my-component.html' | Inline template or external template URL of the component's view. |
styles: ['.primary {color: red}'] styleUrls: ['my-component.css'] | List of inline CSS styles or external stylesheet URLs for styling the component's view. |
Class field decorators for directives and components | Details |
---|---|
import { Input, … } from '@angular/core'; | Import Input, ... from @angular/core . |
@Input() myProperty; | Declares an input property that you can update using property binding (example: <my-cmp [myProperty]="someExpression"> ). |
@Output() myEvent = new EventEmitter(); | Declares an output property that fires events that you can subscribe to with an event binding (example: <my-cmp (myEvent)="doSomething()"> ). |
@HostBinding('class.valid') isValid; | Binds a host element property (here, the CSS class valid ) to a directive/component property (isValid ). |
@HostListener('click', ['$event']) onClick(e) {…} | Subscribes to a host element event (click ) with a directive/component method (onClick ), optionally passing an argument ($event ). |
@ContentChild(myPredicate) myChildComponent; | Binds the first result of the component content query (myPredicate ) to a property (myChildComponent ) of the class. |
@ContentChildren(myPredicate) myChildComponents; | Binds the results of the component content query (myPredicate ) to a property (myChildComponents ) of the class. |
@ViewChild(myPredicate) myChildComponent; | Binds the first result of the component view query (myPredicate ) to a property (myChildComponent ) of the class. Not available for directives. |
@ViewChildren(myPredicate) myChildComponents; | Binds the results of the component view query (myPredicate ) to a property (myChildComponents ) of the class. Not available for directives. |
Directive and component change detection and lifecycle hooks (implemented as class methods) | Details |
---|---|
constructor(myService: MyService, …) { … } | Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here. |
ngOnChanges(changeRecord) { … } | Called after every change to input properties and before processing content or child views. |
ngOnInit() { … } | Called after the constructor, initializing input properties, and the first call to ngOnChanges . |
ngDoCheck() { … } | Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check. |
ngAfterContentInit() { … } | Called after ngOnInit when the component's or directive's content has been initialized. |
ngAfterContentChecked() { … } | Called after every check of the component's or directive's content. |
ngAfterViewInit() { … } | Called after ngAfterContentInit when the component's views and child views / the view that a directive is in has been initialized. |
ngAfterViewChecked() { … } | Called after every check of the component's views and child views / the view that a directive is in. |
ngOnDestroy() { … } | Called once, before the instance is destroyed. |
Dependency injection configuration | Details |
---|---|
{ provide: MyService, useClass: MyMockService } | Sets or overrides the provider for MyService to the MyMockService class. |
{ provide: MyService, useFactory: myFactory } | Sets or overrides the provider for MyService to the myFactory factory function. |
{ provide: MyValue, useValue: 41 } | Sets or overrides the provider for MyValue to the value 41 . |
Routing and navigation | Details |
---|---|
import { Routes, RouterModule, … } from '@angular/router'; | Import Routes, RouterModule, ... from @angular/router . |
const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'path/:routeParam', component: MyComponent }, { path: 'staticPath', component: … }, { path: '**', component: … }, { path: 'oldPath', redirectTo: '/staticPath' }, { path: …, component: …, data: { message: 'Custom' } } ]); const routing = RouterModule.forRoot(routes); | Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve. |
<router-outlet></router-outlet> <router-outlet name="aux"></router-outlet> | Marks the location to load the component of the active route. |
<a routerLink="/path"> <a [routerLink]="[ '/path', routeParam ]"> <a [routerLink]="[ '/path', { matrixParam: 'value' } ]"> <a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }"> <a [routerLink]="[ '/path' ]" fragment="anchor"> | Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the / prefix; for a child route, use the ./ prefix; for a sibling or parent, use the ../ prefix. |
<a [routerLink]="[ '/path' ]" routerLinkActive="active"> | The provided classes are added to the element when the routerLink becomes the current active route. |
<a [routerLink]="[ '/path' ]" routerLinkActive="active" ariaCurrentWhenActive="page"> | The provided classes and aria-current attribute are added to the element when the routerLink becomes the current active route. |
function canActivateGuard: CanActivateFn = ( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ) => { … } { path: …, canActivate: [canActivateGuard] } | An interface for defining a function that the router should call first to determine if it should activate this component. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree . |
function canDeactivateGuard: CanDeactivateFn<T> = ( component: T, route: ActivatedRouteSnapshot, state: RouterStateSnapshot ) => { … } { path: …, canDeactivate: [canDeactivateGuard] } | An interface for defining a function that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree . |
function canActivateChildGuard: CanActivateChildFn = ( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ) => { … } { path: …, canActivateChild: [canActivateGuard], children: … } | An interface for defining a function that the router should call first to determine if it should activate the child route. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree . |
function resolveGuard implements ResolveFn<T> = ( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ) => { … } { path: …, resolve: [resolveGuard] } | An interface for defining a function that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value. |
function canLoadGuard: CanLoadFn = ( route: Route ) => { … } { path: …, canLoad: [canLoadGuard], loadChildren: … } | An interface for defining a function that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean|UrlTree or an Observable/Promise that resolves to a boolean|UrlTree . |
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/guide/cheatsheet