Directives With the View

Change the appearance or behavior of an element, component, or another directive.

Change the DOM layout by adding and removing DOM elements

Adds and removes a set of CSS classes.

Implementation

Adds and removes a set of HTML styles.

Implementation

Adds two-way data binding to an HTML form element.

When NgIf is false, Angular removes an element and its descendants from the DOM. Angular then disposes of their components, which frees up memory and resources.

<app-item-detail *ngIf="isActive" [item]="item"></app-item-detail>

When the isActive expression returns a truthy value, NgIf adds the ItemDetailComponent to the DOM. When the expression is falsy, NgIf removes the ItemDetailComponent from the DOM and disposes of the component and all of its sub-components.

If Else

IfThenElse

<ul [ngSwitch]="user"> <li *ngSwitchCase="'Sanjay0'">Sanjay</li> <li *ngSwitchCase="'Sanjay1'">Sanjay1</li> <li *ngSwitchCase="'Sanjay2'">Sanjay2</li> <li *ngSwitchDefault>USER</li></ul>

If matches multiple elements ,then renders multiple elements

If no one matches, shows the default one!

Angular uses strict equality operator to look for changes, thus forces us to use immutables.

How does ngFor work when we add or remove elements from the list?

How are list items tracked by default?

Why can this be important for performance?

How to use trackBy?

Examples: ngStyle, ngClass

import { Directive, ElementRef } from '@angular/core';@Directive({ selector: '[appHighlight]'})export class HighlightDirective { constructor(private el: ElementRef) { this.el.nativeElement.style.backgroundColor = 'yellow'; }}

<p appHighlight>Highlight me!</p>

@Directive({ selector: '[appHighlight]'})export class HighlightDirective { constructor(private el: ElementRef) { } @HostListener('mouseenter') onMouseEnter() { this.highlight('yellow'); } @HostListener('mouseleave') onMouseLeave() { this.highlight(''); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; }}

@Input() appHighlight = '';

<p [appHighlight]="color">Highlight me!</p>

<p *ngIf="condition> Content </p>

Angular wraps the host element on which the structural directive is applied inside ng-template and then consumes the ng-template in finished DOM with Diagnostic Comments

<ng-template> are lazy and their content isn't rendered by default. So we have to tell Angular explicitly if we want to render it.

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd"> ({{i}}) {{hero.name}}</div><ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"> <div [class.odd]="odd">({{i}}) {{hero.name}}</div></ng-template>

With <ng-template>, you can render the content manually with full control over how the content displays.If there is no structural directive and you wrap some elements in an <ng-template>, those elements disappear.

Our structural directives are also nothing more than attribute directives. Behind the scenes they are also converted in to attribute directives and are applied to an <ng template> not on host element(Important thing to remember). They then instantiate that template for us.

Reference to Container where we want to render the template( Host/Container Element). => ViewContainerRef

1.Reference to TemplateRef which we want to inject. 2.TemplateRef basically refers whats inside <ng-template>. <ng-template> elements are represented as instances of the TemplateRef class.

Both these things can be provided by Angular Dependency Injection

constructor( private viewContainerRef:ViewContainerRef, private templateRef:TemplateRef<any> ) { }

1.We have to use the same name for Input() as that of our selector because

2. Extending the Input to something like *ngIf="condition; else placeholder"

We can use as operator in *ngIf and *ngFor to store value in operator like *ngIf="(movies$ | async) as movies". or let i=index in our *ngFor directive Benefit is we can use movies variable in our template.

Default values for our template by using context

1. Make our TemplateRef type specific

Context Type Guard

class HideAfterContext{ //TO use as operator this property name should match Directive input where we want to use public hideAfterDelay:number=0; public counter:number=0;}

@Directive({ selector: '[hideAfterDelay]'})export class HideAfterDirective implements OnInit { private _delay:number=0; //keeping it generic as we might use async pipe and async pipe can also return null @Input('hideAfterDelay') set delay(delay:number|null) { this._delay=delay ?? 0; this.context.hideAfterDelay=this._delay; this.context.counter=this._delay/1000; } //This is for accessing the then block similar to how ngIf renders else block @Input('hideAfterDelayThen') placeholder:TemplateRef<HideAfterContext>|null=null; private context = new HideAfterContext();

constructor( private viewContainerRef:ViewContainerRef, private templateRef:TemplateRef<HideAfterContext> ) { } static ngTemplateContextGuard(dir:HideAfterDirective,context:unknown) : context is HideAfterContext { return true ; }

ngOnInit(): void { this.viewContainerRef.createEmbeddedView(this.templateRef,this.context); const intervalId= setInterval(()=>{ this.context.counter -=1; },1000) setTimeout(()=>{ this.viewContainerRef.clear(); clearInterval(intervalId); if(this.placeholder!=null) { this.viewContainerRef.createEmbeddedView(this.placeholder,this.context); } },this._delay) }