mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
316c91b1a4
The `moduleId` directive field does not have any effect as of Ivy. In View Engine it was used for resolving template and styles relative to the component source location- but ultimately this is not needed as the Angular compiler knows the source file location at build time, and at runtime never even consulted `moduleId`. An XHR is always issue using the extact specified URL. For Angular CLI users, relative URLs in JIT are still possible because the CLI has a TS transform that will replace the references with actual Webpack imports. `moduleId` does not seem worth keeping in the future, as it's not used currently, and even if we would consider supporting relative JIT resource URLs through it, it would be deeply coupled to CommonJS `module.id`. DEPRECATED: The `@Directive`/`@Component` `moduleId` property is now deprecated. It did not have any effect for multiple major versions and will be removed in v17. PR Close #49496
123 lines
43 KiB
Markdown
123 lines
43 KiB
Markdown
<div class="center-layout-wide">
|
|
|
|
<h1 class="no-toc">Cheat Sheet</h1>
|
|
|
|
| Bootstrapping | Details |
|
|
|:--- |:--- |
|
|
| <code-example format="typescript" hideCopy language="typescript"> import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; </code-example> | Import `platformBrowserDynamic` from `@angular/platform-browser-dynamic`. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> platformBrowserDynamic().bootstrapModule(AppModule); </code-example> | Bootstraps the application, using the root component from the specified `NgModule`. |
|
|
|
|
| NgModules | Details |
|
|
|:--- |:--- |
|
|
| <code-example format="typescript" hideCopy language="typescript"> import { NgModule } from '@angular/core'; </code-example> | Import `NgModule` from `@angular/core`. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @NgModule({ 
 declarations: …, 
 imports: …, 
 exports: …, 
 providers: …, 
 bootstrap: … 
}) 
class MyModule {} </code-example> | Defines a module that contains components, directives, pipes, and providers. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> declarations: [ 
 MyRedComponent, 
 MyBlueComponent, 
 MyDatePipe 
] </code-example> | List of components, directives, and pipes that belong to this module. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> imports: [ 
 BrowserModule, 
 SomeOtherModule 
] </code-example> | List of modules to import into this module. Everything from the imported modules is available to `declarations` of this module. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> exports: [ 
 MyRedComponent, 
 MyDatePipe 
] </code-example> | List of components, directives, and pipes visible to modules that import this module. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> providers: [ 
 MyService, 
 { provide: … } 
] </code-example> | List of dependency injection providers visible both to the contents of this module and to importers of this module. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> bootstrap: [MyAppComponent] </code-example> | List of components to bootstrap when this module is bootstrapped. |
|
|
|
|
| Template syntax | Details |
|
|
|:--- |:--- |
|
|
| <code-example format="html" hideCopy language="html"> <input [value]="firstName"> </code-example> | Binds property `value` to the result of expression `firstName`. |
|
|
| <code-example format="html" hideCopy language="html"> <div [attr.role]="myAriaRole"> </code-example> | Binds attribute `role` to the result of expression `myAriaRole`. |
|
|
| <code-example format="html" hideCopy language="html"> <div [class.extra-sparkle]="isDelightful"> </code-example> | Binds the presence of the CSS class `extra-sparkle` on the element to the truthiness of the expression `isDelightful`. |
|
|
| <code-example format="html" hideCopy language="html"> <div [style.width.px]="mySize"> </code-example> | Binds style property `width` to the result of expression `mySize` in pixels. Units are optional. |
|
|
| <code-example format="html" hideCopy language="html"> <button (click)="readRainbow($event)"> </code-example> | Calls method `readRainbow` when a click event is triggered on this button element \(or its children\) and passes in the event object. |
|
|
| <code-example format="html" hideCopy language="html"> <div title="Hello {{ponyName}}"> </code-example> | Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: <code-example format="html" hideCopy language="html"> <div [title]="'Hello ' + ponyName"> </code-example> |
|
|
| <code-example format="html" hideCopy language="html"> <p> 
 Hello {{ponyName}} 
</p> </code-example> | Binds text content to an interpolated string, for example, "Hello Seabiscuit". |
|
|
| <code-example format="html" hideCopy language="html"> <my-cmp [(title)]="name"> </code-example> | Sets up two-way data binding. Equivalent to: <code-example format="html" hideCopy language="html"> <my-cmp [title]="name" (titleChange)="name=$event"> </code-example> |
|
|
| <code-example format="html" hideCopy language="html"> <video #movieplayer …></video> 
<button (click)="movieplayer.play()"> 
 Play 
</button> </code-example> | Creates a local variable `movieplayer` that provides access to the `video` element instance in data-binding and event-binding expressions in the current template. |
|
|
| <code-example format="html" hideCopy language="html"> <p *myUnless="myExpression"> 
 … 
</p> </code-example> | The asterisk \(`*`\) character turns the current element into an embedded template. Equivalent to: <code-example format="html" hideCopy language="html"> <ng-template [myUnless]="myExpression"> 
 <p> 
 … 
 </p> 
</ng-template> </code-example> |
|
|
| <code-example format="html" hideCopy language="html"> <p> 
 Card No.: {{cardNumber | myCardNumberFormatter}} 
</p> </code-example> | Transforms the current value of expression `cardNumber` using the pipe called `myCardNumberFormatter`. |
|
|
| <code-example format="html" hideCopy language="html"> <p> 
 Employer: {{employer?.companyName}} 
</p> </code-example> | The safe navigation operator \(`?`\) means that the `employer` field is optional and if `undefined`, the rest of the expression should be ignored. |
|
|
| <code-example format="html" hideCopy language="html"> <svg:rect x="0" 
 y="0" 
 width="100" 
 height="100"/> </code-example> | An SVG snippet template needs an `svg:` prefix on its root element to disambiguate the SVG element from an HTML component. |
|
|
| <code-example format="html" hideCopy language="html"> <svg> 
 <rect x="0" 
 y="0" 
 width="100" 
 height="100"/> 
</svg> </code-example> | An `<svg>` root element is detected as an SVG element automatically, without the prefix. |
|
|
|
|
| Built-in directives | Details |
|
|
|:--- |:--- |
|
|
| <code-example format="typescript" hideCopy language="typescript"> import { CommonModule } from '@angular/common'; </code-example> | Import `CommonModule` from `@angular/common`. |
|
|
| <code-example format="html" hideCopy language="html"> <section *ngIf="showSection"> </code-example> | Removes or recreates a portion of the DOM tree based on the `showSection` expression. |
|
|
| <code-example format="html" hideCopy language="html"> <li *ngFor="let item of list"> </code-example> | Turns the `li` element and its contents into a template, and uses that to instantiate a view for each item in list. |
|
|
| <code-example format="html" hideCopy language="html"> <div [ngSwitch]="conditionExpression">
 <ng-template [ngSwitchCase]="case1Exp"> 
 … 
 </ng-template>
 <ng-template ngSwitchCase="case2LiteralString"> 
 … 
 </ng-template>
 <ng-template ngSwitchDefault> 
 … 
 </ng-template> 
</div> </code-example> | Conditionally swaps the contents of the `div` by selecting one of the embedded templates based on the current value of `conditionExpression`. |
|
|
| <code-example format="html" hideCopy language="html"> <div [ngClass]="{'active': isActive, 
 'disabled': isDisabled}"> </code-example> | 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. |
|
|
| <code-example format="html" hideCopy language="html"> <div [ngStyle]="{'property': 'value'}"> 
<div [ngStyle]="dynamicStyles()"> </code-example> | 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 |
|
|
|:--- |:--- |
|
|
| <code-example format="typescript" hideCopy language="typescript"> import { FormsModule } from '@angular/forms'; </code-example> | Import `FormsModule` from `@angular/forms`. |
|
|
| <code-example format="html" hideCopy language="html"> <input [(ngModel)]="userName"> </code-example> | Provides two-way data-binding, parsing, and validation for form controls. |
|
|
|
|
| Class decorators | Details |
|
|
|:--- |:--- |
|
|
| <code-example format="typescript" hideCopy language="typescript"> import { Directive, … } from '@angular/core'; </code-example> | Import `Directive, …` from `@angular/core';`. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @Component({…}) 
class MyComponent() {} </code-example> | Declares that a class is a component and provides metadata about the component. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @Directive({…}) 
class MyDirective() {} </code-example> | Declares that a class is a directive and provides metadata about the directive. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @Pipe({…}) 
class MyPipe() {} </code-example> | Declares that a class is a pipe and provides metadata about the pipe. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @Injectable() 
class MyService() {} </code-example> | 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 |
|
|
|:--- |:--- |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @Directive({ 
 property1: value1, 
 … 
}) </code-example> | Add `property1` property with `value1` value to Directive. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> selector: '.cool-button:not(a)' </code-example> | Specifies a CSS selector that identifies this directive within a template. Supported selectors include `element`, `[attribute]`, `.class`, and `:not()`. <br /> Does not support parent-child relationship selectors. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> providers: [ 
 MyService, 
 { provide: … } 
] </code-example> | List of dependency injection providers for this directive and its children. |
|
|
|
|
| Component configuration <br /> `@Component` extends `@Directive`, so the `@Directive` configuration applies to components as well | Details |
|
|
|:--- |:--- |
|
|
| <code-example format="typescript" hideCopy language="typescript"> viewProviders: [MyService, { provide: … }] </code-example> | List of dependency injection providers scoped to this component's view. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> template: 'Hello {{name}}' 
templateUrl: 'my-component.html' </code-example> | Inline template or external template URL of the component's view. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> styles: ['.primary {color: red}'] 
styleUrls: ['my-component.css'] </code-example> | List of inline CSS styles or external stylesheet URLs for styling the component's view. |
|
|
|
|
| Class field decorators for directives and components | Details |
|
|
|:--- |:--- |
|
|
| <code-example format="typescript" hideCopy language="typescript"> import { Input, … } from '@angular/core'; </code-example> | Import `Input, ...` from `@angular/core`. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @Input() myProperty; </code-example> | Declares an input property that you can update using property binding \(example: `<my-cmp [myProperty]="someExpression">`\). |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @Output() myEvent = new EventEmitter(); </code-example> | Declares an output property that fires events that you can subscribe to with an event binding \(example: `<my-cmp (myEvent)="doSomething()">`\). |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @HostBinding('class.valid') isValid; </code-example> | Binds a host element property \(here, the CSS class `valid`\) to a directive/component property \(`isValid`\). |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @HostListener('click', ['$event']) onClick(e) {…} </code-example> | Subscribes to a host element event \(`click`\) with a directive/component method \(`onClick`\), optionally passing an argument \(`$event`\). |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @ContentChild(myPredicate) myChildComponent; </code-example> | Binds the first result of the component content query \(`myPredicate`\) to a property \(`myChildComponent`\) of the class. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @ContentChildren(myPredicate) myChildComponents; </code-example> | Binds the results of the component content query \(`myPredicate`\) to a property \(`myChildComponents`\) of the class. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @ViewChild(myPredicate) myChildComponent; </code-example> | Binds the first result of the component view query \(`myPredicate`\) to a property \(`myChildComponent`\) of the class. Not available for directives. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> @ViewChildren(myPredicate) myChildComponents; </code-example> | 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 |
|
|
|:--- |:--- |
|
|
| <code-example format="typescript" hideCopy language="typescript"> constructor(myService: MyService, …) { … } </code-example> | Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> ngOnChanges(changeRecord) { … } </code-example> | Called after every change to input properties and before processing content or child views. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> ngOnInit() { … } </code-example> | Called after the constructor, initializing input properties, and the first call to `ngOnChanges`. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> ngDoCheck() { … } </code-example> | 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. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> ngAfterContentInit() { … } </code-example> | Called after `ngOnInit` when the component's or directive's content has been initialized. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> ngAfterContentChecked() { … } </code-example> | Called after every check of the component's or directive's content. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> ngAfterViewInit() { … } </code-example> | Called after `ngAfterContentInit` when the component's views and child views / the view that a directive is in has been initialized. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> ngAfterViewChecked() { … } </code-example> | Called after every check of the component's views and child views / the view that a directive is in. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> ngOnDestroy() { … } </code-example> | Called once, before the instance is destroyed. |
|
|
|
|
| Dependency injection configuration | Details |
|
|
|:--- |:--- |
|
|
| <code-example format="typescript" hideCopy language="typescript"> { provide: MyService, useClass: MyMockService } </code-example> | Sets or overrides the provider for `MyService` to the `MyMockService` class. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> { provide: MyService, useFactory: myFactory } </code-example> | Sets or overrides the provider for `MyService` to the `myFactory` factory function. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> { provide: MyValue, useValue: 41 } </code-example> | Sets or overrides the provider for `MyValue` to the value `41`. |
|
|
|
|
| Routing and navigation | Details |
|
|
|:--- |:--- |
|
|
| <code-example format="typescript" hideCopy language="typescript"> import { Routes, RouterModule, … } from '@angular/router'; </code-example> | Import `Routes, RouterModule, ...` from `@angular/router`. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> 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); </code-example> | Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve. |
|
|
| <code-example format="html" hideCopy language="html"> <router-outlet></router-outlet> 
<router-outlet name="aux"></router-outlet> </code-example> | Marks the location to load the component of the active route. |
|
|
| <code-example format="html" hideCopy language="html"> <a routerLink="/path"> 
<a [routerLink]="[ '/path', routeParam ]"> 
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]"> 
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }"> 
<a [routerLink]="[ '/path' ]" fragment="anchor"> </code-example> | 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. |
|
|
| <code-example format="html" hideCopy language="html"> <a [routerLink]="[ '/path' ]" routerLinkActive="active"> </code-example> | The provided classes are added to the element when the `routerLink` becomes the current active route. |
|
|
| <code-example format="html" hideCopy language="html"> <a [routerLink]="[ '/path' ]" routerLinkActive="active" ariaCurrentWhenActive="page"> </code-example> | The provided classes and `aria-current` attribute are added to the element when the `routerLink` becomes the current active route. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> function canActivateGuard: CanActivateFn = 
 ( 
 route: ActivatedRouteSnapshot, 
 state: RouterStateSnapshot 
 ) => { … } 
 
{ path: …, canActivate: [canActivateGuard] } </code-example> | An interface for defining a function that the router should call first to determine if it should activate this component. Should return a <code>boolean|UrlTree</code> or an Observable/Promise that resolves to a <code>boolean|UrlTree</code>. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> function canDeactivateGuard: CanDeactivateFn<T> = 
 ( 
 component: T, 
 route: ActivatedRouteSnapshot, 
 state: RouterStateSnapshot 
 ) => { … } 
 
{ path: …, canDeactivate: [canDeactivateGuard] } </code-example> | 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 <code>boolean|UrlTree</code> or an Observable/Promise that resolves to a <code>boolean|UrlTree</code>. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> function canActivateChildGuard: CanActivateChildFn = 
 ( 
 route: ActivatedRouteSnapshot, 
 state: RouterStateSnapshot 
 ) => { … } 
 
{ path: …, canActivateChild: [canActivateGuard], children: … } </code-example> | An interface for defining a function that the router should call first to determine if it should activate the child route. Should return a <code>boolean|UrlTree</code> or an Observable/Promise that resolves to a <code>boolean|UrlTree</code>. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> function resolveGuard implements ResolveFn<T> = 
 ( 
 route: ActivatedRouteSnapshot, 
 state: RouterStateSnapshot 
 ) => { … } 
 
{ path: …, resolve: [resolveGuard] } </code-example> | 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. |
|
|
| <code-example format="typescript" hideCopy language="typescript"> function canLoadGuard: CanLoadFn = 
 ( 
 route: Route 
 ) => { … } 
 
{ path: …, canLoad: [canLoadGuard], loadChildren: … } </code-example> | 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 <code>boolean|UrlTree</code> or an Observable/Promise that resolves to a <code>boolean|UrlTree</code>. |
|
|
|
|
</div>
|
|
|
|
<!-- links -->
|
|
|
|
<!-- external links -->
|
|
|
|
<!-- end links -->
|
|
|
|
@reviewed 2022-02-28
|