Discover published sets by community

A structural directive that renders a template for each item in a collection. Usage: <li *ngFor="let item of items">{{ item }}</li>.

Conditionally includes a template block in the DOM based on the truthiness of the expression provided. Usage: <div *ngIf="condition">Content to display if condition is true</div>.

Allows you to dynamically set inline styles based on the condition provided. Usage: <div [ngStyle]="{'font-size': '12px', 'color': condition ? 'blue' : 'red'}">...</div>.

Facilitates the switching between nested templates based on some condition akin to a switch statement. Usage: <div [ngSwitch]="expression"> <template *ngSwitchCase="matchValue">...</template></div>.

Dynamically assigns CSS classes to an element based on conditions or object map. Usage: <div [ngClass]="{'class-name': condition}">...</div>.

Provides two-way data-binding between HTML form elements and component data. Usage: <input [(ngModel)]="propertyName">.

Serves as a group placeholder that doesn't interfere with styles or layout because Angular doesn't put it in the DOM. Usage: <ng-container>...</ng-container>.

Facilitates localization of ordinal numbers, rendering templates based on the value of the provided expression. Usage: <div [ngPlural]="value">...</div>.

Used to insert an embedded view from a prepared TemplateRef. Usage: <ng-container *ngTemplateOutlet="templateRef"></ng-container>.

Denotes where to insert transcluded content within a component's template. Usage: <ng-content select=".my-class"></ng-content>.

A lifecycle hook that is called after the component's view and its child views have been checked. Defined as a method within a component class.

Special directive that applies styles to the hosting element of the component. Usage is implicit, and styles are defined within the component's styles.

A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive. Defined as a method within a component class.

A lifecycle hook that is called just before the directive is destroyed, used for cleanup. Defined as a method within a component class.

Defines an inline template that can be used by ngTemplateOutlet and other directives. Usage: <ng-template #templateRef>...</ng-template>.

A lifecycle hook that is called after a component's view and its child views are initialized. Defined as a method within a component class.

A property decorator that is used to bind a host element property to a directive's property. Usage: @HostBinding('attr.role') role = 'button';

Used within ngSwitch to match a case and display its associated content. Usage: <div *ngSwitchCase="'caseValue'">...</div>.

Specifies the default case to display when no ngSwitchCase matches in ngSwitch directive. Usage: <div *ngSwitchDefault>Default case content</div>.

A lifecycle hook that is called to check for changes in the directive or component. Defined as a method within a component class.

A method decorator that declares a DOM event to listen for, and provides a handler method to run when that event occurs. Usage: @HostListener('click', ['$event']) onClick(event) {}$

A property decorator that configures a view query. Usage: @ViewChild('childDirective') childDirective: ElementRef;

A lifecycle hook that is called after the directive's content is fully initialized. Defined as a method within a component class.

Dynamically instantiates a component and injects it into the template at the specified location. Usage: <ng-container *ngComponentOutlet="componentType"></ng-container>.

A property decorator that is used to get the QueryList of elements or directives from the content DOM. Usage: @ContentChildren(ChildDirective) contentChildren: QueryList<ChildDirective>;

Used with ngPlural to specify content for different plural categories. Usage: <template ngPluralCase="'one'">Single item</template>.

A lifecycle hook that is called after the content of a directive has been checked by Angular's change detection. Defined as a method within a component class.

A property decorator that configures a view query for a set of elements. Usage: @ViewChildren(ChildDirective) childDirectives: QueryList<ChildDirective>;

Tells Angular not to compile or bind the contents of the current DOM element. Usage: <div ngNonBindable>{{ ignoreBinding }}</div>.