Cheat Sheet
Bootstrapping | Details |
---|---|
|
Import platformBrowserDynamic from @angular/platform-browser-dynamic . |
|
Bootstraps the application, using the root component from the specified NgModule . |
NgModules | Details |
---|---|
|
Import NgModule from @angular/core . |
|
Defines a module that contains components, directives, pipes, and providers. |
|
List of components, directives, and pipes that belong to this module. |
|
List of modules to import into this module. Everything from the imported modules is available to declarations of this module. |
|
List of components, directives, and pipes visible to modules that import this module. |
|
List of dependency injection providers visible both to the contents of this module and to importers of this module. |
|
List of components to bootstrap when this module is bootstrapped. |
Template syntax | Details |
---|---|
|
Binds property value to the result of expression firstName . |
|
Binds attribute role to the result of expression myAriaRole . |
|
Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful . |
|
Binds style property width to the result of expression mySize in pixels. Units are optional. |
|
Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object. |
|
Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to:
|
|
Binds text content to an interpolated string, for example, "Hello Seabiscuit". |
|
Sets up two-way data binding. Equivalent to:
|
|
Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template. |
|
The asterisk (* ) character turns the current element into an embedded template. Equivalent to:
|
|
Transforms the current value of expression cardNumber using the pipe called myCardNumberFormatter . |
|
The safe navigation operator (? ) means that the employer field is optional and if undefined , the rest of the expression should be ignored. |
|
An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component. |
|
An <svg> root element is detected as an SVG element automatically, without the prefix. |
Built-in directives | Details |
---|---|
|
Import CommonModule from @angular/common . |
|
Removes or recreates a portion of the DOM tree based on the showSection expression. |
|
Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list. |
|
Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression . |
|
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. |
|
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 . |
|
Provides two-way data-binding, parsing, and validation for form controls. |
Class decorators | Details |
---|---|
|
Import Directive, … from @angular/core'; . |
|
Declares that a class is a component and provides metadata about the component. |
|
Declares that a class is a directive and provides metadata about the directive. |
|
Declares that a class is a pipe and provides metadata about the pipe. |
|
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 |
---|---|
|
Add property1 property with value1 value to Directive. |
|
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. |
|
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 |
---|---|
|
List of dependency injection providers scoped to this component's view. |
|
Inline template or external template URL of the component's view. |
|
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 . |
|
Declares an input property that you can update using property binding (example: <my-cmp [myProperty]="someExpression"> ). |
|
Declares an output property that fires events that you can subscribe to with an event binding (example: <my-cmp (myEvent)="doSomething()"> ). |
|
Binds a host element property (here, the CSS class valid ) to a directive/component property (isValid ). |
|
Subscribes to a host element event (click ) with a directive/component method (onClick ), optionally passing an argument ($event ). |
|
Binds the first result of the component content query (myPredicate ) to a property (myChildComponent ) of the class. |
|
Binds the results of the component content query (myPredicate ) to a property (myChildComponents ) of the class. |
|
Binds the first result of the component view query (myPredicate ) to a property (myChildComponent ) of the class. Not available for directives. |
|
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 |
---|---|
|
Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here. |
|
Called after every change to input properties and before processing content or child views. |
|
Called after the constructor, initializing input properties, and the first call to ngOnChanges . |
|
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. |
|
Called after ngOnInit when the component's or directive's content has been initialized. |
|
Called after every check of the component's or directive's content. |
|
Called after ngAfterContentInit when the component's views and child views / the view that a directive is in has been initialized. |
|
Called after every check of the component's views and child views / the view that a directive is in. |
|
Called once, before the instance is destroyed. |
Dependency injection configuration | Details |
---|---|
|
Sets or overrides the provider for MyService to the MyMockService class. |
|
Sets or overrides the provider for MyService to the myFactory factory function. |
|
Sets or overrides the provider for MyValue to the value 41 . |
Routing and navigation | Details |
---|---|
|
Import Routes, RouterModule, ... from @angular/router . |
|
Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve. |
|
Marks the location to load the component of the active route. |
|
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. |
|
The provided classes are added to the element when the routerLink becomes the current active route. |
|
The provided classes and aria-current attribute are added to the element when the routerLink becomes the current active route. |
|
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 . |
|
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 . |
|
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 . |
|
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. |
|
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 . |
Last reviewed on Mon Feb 28 2022