Web-Angular

Angular - Skipping component subtrees

Skipping component subtrees

Using OnPush
Common change detection scenarios
An event is handled by a component with default change detection
An event is handled by a component with OnPush
An event is handled by a descendant of a component with OnPush
New inputs to component with OnPush
Edge cases

JavaScript, by default, uses mutable data structures that you can reference from multiple different components. Angular runs change detection over your entire component tree to make sure that the most up-to-date state of your data structures is reflected in the DOM.

Change detection is sufficiently fast for most applications. However, when an application has an especially large component tree, running change detection across the whole application can cause performance issues. You can address this by configuring change detection to only run on a subset of the component tree.

If you are confident that a part of the application is not affected by a state change, you can use OnPush to skip change detection in an entire component subtree.

Using `OnPush`

OnPush change detection instructs Angular to run change detection for a component subtree only when:

The root component of the subtree receives new inputs as the result of a template binding. Angular compares the current and past value of the input with ==
Angular handles an event (for example using event binding, output binding, or @HostListener ) in the subtree's root component or any of its children whether they are using OnPush change detection or not.

You can set the change detection strategy of a component to OnPush in the @Component decorator:

      
      import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent {}

Common change detection scenarios

This section examines several common change detection scenarios to illustrate Angular's behavior.

An event is handled by a component with default change detection

If Angular handles an event within a component without OnPush strategy, the framework executes change detection on the entire component tree. Angular will skip descendant component subtrees with roots using OnPush , which have not received new inputs.

As an example, if we set the change detection strategy of MainComponent to OnPush and the user interacts with a component outside the subtree with root MainComponent , Angular will check all the green components from the diagram below ( AppComponent , HeaderComponent , SearchComponent , ButtonComponent ) unless MainComponent receives new inputs:

An event is handled by a component with OnPush

If Angular handles an event within a component with OnPush strategy, the framework will execute change detection within the entire component tree. Angular will ignore component subtrees with roots using OnPush, which have not received new inputs and are outside the component which handled the event.

As an example, if Angular handles an event within MainComponent , the framework will run change detection in the entire component tree. Angular will ignore the subtree with root LoginComponent because it has OnPush and the event happened outside of its scope.

An event is handled by a descendant of a component with OnPush

If Angular handles an event in a component with OnPush, the framework will execute change detection in the entire component tree, including the component’s ancestors.

As an example, in the diagram below, Angular handles an event in LoginComponent which uses OnPush. Angular will invoke change detection in the entire component subtree including MainComponent ( LoginComponent ’s parent), even though MainComponent has OnPush as well. Angular checks MainComponent as well because LoginComponent is part of its view.

New inputs to component with OnPush

Angular will run change detection within a child component with OnPush setting an input property as result of a template binding.

For example, in the diagram below, AppComponent passes a new input to MainComponent , which has OnPush . Angular will run change detection in MainComponent but will not run change detection in LoginComponent , which also has OnPush , unless it receives new inputs as well.

Edge cases

Modifying input properties in TypeScript code . When you use an API like @ViewChild or @ContentChild to get a reference to a component in TypeScript and manually modify an @Input property, Angular will not automatically run change detection for OnPush components. If you need Angular to run change detection, you can inject ChangeDetectorRef in your component and call changeDetectorRef.markForCheck() to tell Angular to schedule a change detection.
Modifying object references . In case an input receives a mutable object as value and you modify the object but preserve the reference, Angular will not invoke change detection. That’s the expected behavior because the previous and the current value of the input point to the same reference.

Last reviewed on Wed May 04 2022

Angular - Slow computations

Slow computations

Contents

Identifying slow computations
Optimizing slow computations

On every change detection cycle, Angular synchronously:

Evaluates all template expressions in all components, unless specified otherwise, based on that each component's detection strategy
Executes the ngDoCheck , ngAfterContentChecked , ngAfterViewChecked , and ngOnChanges lifecycle hooks. A single slow computation within a template or a lifecycle hook can slow down the entire change detection process because Angular runs the computations sequentially.

Identifying slow computations

You can identify heavy computations with Angular DevTools’ profiler. In the performance timeline, click a bar to preview a particular change detection cycle. This displays a bar chart, which shows how long the framework spent in change detection for each component. When you click a component, you can preview how long Angular spent evaluating its template and lifecycle hooks.

For example, in the preceding screenshot, the second recorded change detection cycle is selected. Angular spent over 573 ms on this cycle, with the most time spent in the EmployeeListComponent . In the details panel, you can see that Angular spent over 297 ms evaluating the template of the EmployeeListComponent .

Optimizing slow computations

Here are several techniques to remove slow computations:

Optimizing the underlying algorithm . This is the recommended approach. If you can speed up the algorithm that is causing the problem, you can speed up the entire change detection mechanism.
Caching using pure pipes . You can move the heavy computation to a pure pipe. Angular reevaluates a pure pipe only if it detects that its inputs have changed, compared to the previous time Angular called it.
Using memoization . Memoization is a similar technique to pure pipes, with the difference that pure pipes preserve only the last result from the computation where memoization could store multiple results.
Avoid repaints/reflows in lifecycle hooks . Certain operations cause the browser to either synchronously recalculate the layout of the page or re-render it. Since reflows and repaints are generally slow, you want to avoid performing them in every change detection cycle.

Pure pipes and memoization have different trade-offs. Pure pipes are an Angular built-in concept compared to memoization, which is a general software engineering practice for caching function results. The memory overhead of memoization could be significant if you invoke the heavy computation frequently with different arguments.

Last reviewed on Wed May 04 2022

Read article

Angular - Resolving zone pollution

Resolving zone pollution

Contents

Identifying unnecessary change detection calls
Run tasks outside NgZone

Zone.js is a signaling mechanism that Angular uses to detect when an application state might have changed. It captures asynchronous operations like setTimeout , network requests, and event listeners. Angular schedules change detection based on signals from Zone.js

In some cases scheduled tasks or microtasks don’t make any changes in the data model, which makes running change detection unnecessary. Common examples are:

requestAnimationFrame , setTimeout or setInterval
Task or microtask scheduling by third-party libraries

This section covers how to identify such conditions, and how to run code outside the Angular zone to avoid unnecessary change detection calls.

Identifying unnecessary change detection calls

You can detect unnecessary change detection calls using Angular DevTools. Often they appear as consecutive bars in the profiler’s timeline with source setTimeout , setInterval , requestAnimationFrame , or an event handler. When you have limited calls within your application of these APIs, the change detection invocation is usually caused by a third-party library.

In the image above, there is a series of change detection calls triggered by event handlers associated with an element. That’s a common challenge when using third-party, non-native Angular components, which do not alter the default behavior of NgZone .

Run tasks outside `NgZone`

In such cases, you can instruct Angular to avoid calling change detection for tasks scheduled by a given piece of code using NgZone.

      
      import { Component, NgZone, OnInit } from '@angular/core';
@Component(...)
class AppComponent implements OnInit {
  constructor(private ngZone: NgZone) {}
  ngOnInit() {
    this.ngZone.runOutsideAngular(() => setInterval(pollForUpdates), 500);
  }
}

The preceding snippet instructs Angular to call setInterval outside the Angular Zone and skip running change detection after pollForUpdates runs.

Third-party libraries commonly trigger unnecessary change detection cycles because they weren't authored with Zone.js in mind. Avoid these extra cycles by calling library APIs outside the Angular zone:

      
      import { Component, NgZone, OnInit } from '@angular/core';
import * as Plotly from 'plotly.js-dist-min';

@Component(...)
class AppComponent implements OnInit {
  constructor(private ngZone: NgZone) {}
  ngOnInit() {
    this.ngZone.runOutsideAngular(() => {
      Plotly.newPlot('chart', data);
    });
  }
}

Running Plotly.newPlot('chart', data); within runOutsideAngular instructs the framework that it shouldn’t run change detection after the execution of tasks scheduled by the initialization logic.

For example, if Plotly.newPlot('chart', data) adds event listeners to a DOM element, Angular does not run change detection after the execution of their handlers.

Last reviewed on Wed May 04 2022

Read article

Angular - Angular change detection and runtime optimization

Angular change detection and runtime optimization

Change detection is the process through which Angular checks to see whether your application state has changed, and if any DOM needs to be updated. At a high level, Angular walks your components from top to bottom, looking for changes. Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application’s view. Change detection can be triggered either manually or through an asynchronous event (for example, a user interaction or an XMLHttpRequest completion).

Change detection is a highly optimized performant, but it can still cause slowdowns if the application runs it too frequently.

In this guide, you’ll learn how to control and optimize the change detection mechanism by skipping parts of your application and running change detection only when necessary.

Watch this video if you prefer to learn more about performance optimizations in a media format:

Last reviewed on Wed May 04 2022

Read article

Angular - Cheat Sheet

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

Read article

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

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

Read article

Welcome to Knowledge Base!

KB at your finger tips

Web-Angular

Angular - Skipping component subtrees

Skipping component subtrees

Using `OnPush`

Common change detection scenarios

An event is handled by a component with default change detection

An event is handled by a component with OnPush

An event is handled by a descendant of a component with OnPush

New inputs to component with OnPush

Edge cases

Angular - Slow computations

Slow computations

Identifying slow computations

Optimizing slow computations

Angular - Resolving zone pollution

Resolving zone pollution

Identifying unnecessary change detection calls

Run tasks outside `NgZone`

Angular - Angular change detection and runtime optimization

Angular change detection and runtime optimization

Angular - Cheat Sheet

Cheat Sheet

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

Web-Angular

Angular - Skipping component subtrees

Skipping component subtrees link

Using OnPush link

Common change detection scenarios link

An event is handled by a component with default change detection link

An event is handled by a component with OnPush link

An event is handled by a descendant of a component with OnPush link

New inputs to component with OnPush link

Edge cases link

Angular - Slow computations

Slow computations link

Identifying slow computations link

Optimizing slow computations link

Angular - Resolving zone pollution

Resolving zone pollution link

Identifying unnecessary change detection calls link

Run tasks outside NgZone link

Angular - Angular change detection and runtime optimization

Angular change detection and runtime optimization link

Angular - Cheat Sheet

Cheat Sheet 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

Skipping component subtrees

Using `OnPush`

Common change detection scenarios

An event is handled by a component with default change detection

An event is handled by a component with OnPush

An event is handled by a descendant of a component with OnPush

New inputs to component with OnPush

Edge cases

Slow computations

Identifying slow computations

Optimizing slow computations

Resolving zone pollution

Identifying unnecessary change detection calls

Run tasks outside `NgZone`

Angular change detection and runtime optimization

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