Cheat Sheet

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
`moduleId: module.id`	If set, the `templateUrl` and `styleUrl` are resolved relative to the component.
`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` .

Last reviewed on Mon Feb 28 2022

Stay Ahead in Today’s Competitive Market!
Unlock your company’s full potential with a Virtual Delivery Center (VDC). Gain specialized expertise, drive seamless operations, and scale effortlessly for long-term success.

Class and style binding

Prerequisites
Binding to a single CSS class
Binding to multiple CSS classes
Binding to a single style
Binding to multiple styles
Single and multiple-style binding example
Styling precedence
What’s next

Use class and style bindings to add and remove CSS class names from an element's class attribute and to set styles dynamically.

Prerequisites

Property binding

Binding to a single CSS `class`

To create a single class binding, type the following:

[class.sale]="onSale"

Angular adds the class when the bound expression, onSale is truthy, and it removes the class when the expression is falsy—with the exception of undefined . See styling delegation for more information.

Binding to multiple CSS classes

To bind to multiple classes, type the following:

[class]="classExpression"

The expression can be one of:

A space-delimited string of class names.
An object with class names as the keys and truthy or falsy expressions as the values.
An array of class names.

With the object format, Angular adds a class only if its associated value is truthy.

With any object-like expression—such as object , Array , Map , or Set —the identity of the object must change for Angular to update the class list. Updating the property without changing object identity has no effect.

If there are multiple bindings to the same class name, Angular uses styling precedence to determine which binding to use.

The following table summarizes class binding syntax.

Binding Type	Syntax	Input Type	Example Input Values
Single class binding	`[class.sale]="onSale"`	`boolean \| undefined \| null`	`true` , `false`
Multi-class binding	`[class]="classExpression"`	`string`	`"my-class-1 my-class-2 my-class-3"`
Multi-class binding	`[class]="classExpression"`	`Record<string, boolean \| undefined \| null>`	`{foo: true, bar: false}`
Multi-class binding	`[class]="classExpression"`	`Array<string>`	`['foo', 'bar']`

Binding to a single style

To create a single style binding, use the prefix style followed by a dot and the name of the CSS style.

For example, to set the width style, type the following: [style.width]="width"

Angular sets the property to the value of the bound expression, which is usually a string. Optionally, you can add a unit extension like em or % , which requires a number type.

To write a style in dash-case, type the following:

      
      <nav [style.background-color]="expression"></nav>

To write a style in camelCase, type the following:

      
      <nav [style.backgroundColor]="expression"></nav>

Binding to multiple styles

To toggle multiple styles, bind to the [style] attribute—for example, [style]="styleExpression" . The styleExpression can be one of:

A string list of styles such as "width: 100px; height: 100px; background-color: cornflowerblue;" .
An object with style names as the keys and style values as the values, such as {width: '100px', height: '100px', backgroundColor: 'cornflowerblue'} .

Note that binding an array to [style] is not supported.

When binding [style] to an object expression, the identity of the object must change for Angular to update the class list. Updating the property without changing object identity has no effect.

Single and multiple-style binding example

nav-bar.component.ts

      
      @Component({
  selector: 'app-nav-bar',
  template: `
<nav [style]='navStyle'>
  <a [style.text-decoration]="activeLinkStyle">Home Page</a>
  <a [style.text-decoration]="linkStyle">Login</a>
</nav>`
})
export class NavBarComponent {
  navStyle = 'font-size: 1.2rem; color: cornflowerblue;';
  linkStyle = 'underline';
  activeLinkStyle = 'overline';
  /* . . . */
}

If there are multiple bindings to the same style attribute, Angular uses styling precedence to determine which binding to use.

The following table summarizes style binding syntax.

Binding Type	Syntax	Input Type	Example Input Values
Single style binding	`[style.width]="width"`	`string \| undefined \| null`	`"100px"`
Single style binding with units	`[style.width.px]="width"`	`number \| undefined \| null`	`100`
Multi-style binding	`[style]="styleExpression"`	`string`	`"width: 100px; height: 100px"`
Multi-style binding	`[style]="styleExpression"`	`Record<string, string \| undefined \| null>`	`{width: '100px', height: '100px'}`

Styling precedence

A single HTML element can have its CSS class list and style values bound to multiple sources (for example, host bindings from multiple directives).

What’s next

Component styles
Introduction to Angular animations

Last reviewed on Mon May 09 2022

Welcome to Knowledge Base!

KB at your finger tips

Angular

Angular - Cheat Sheet

Cheat Sheet

Angular

Angular

Angular

Angular

Angular - Class and style binding

Class and style binding

Prerequisites

Binding to a single CSS `class`

Binding to multiple CSS classes

Binding to a single style

Binding to multiple styles

Single and multiple-style binding example

Styling precedence

What’s next

Thank you for subscribing to AiDOOS! Stay connected for updates!

Welcome to Knowledge Base!

KB at your finger tips

Angular

Angular - Cheat Sheet

Cheat Sheet link

Angular

link

Angular

link

Angular

link

Angular

link

Angular - Class and style binding

Class and style binding link

Prerequisites link

Binding to a single CSS class link

Binding to multiple CSS classes link

Binding to a single style link

Binding to multiple styles link

Single and multiple-style binding example link

Styling precedence link

What’s next link

Cheat Sheet

Class and style binding

Prerequisites

Binding to a single CSS `class`

Binding to multiple CSS classes

Binding to a single style

Binding to multiple styles

Single and multiple-style binding example

Styling precedence

What’s next