Angular Directives

Angular Directives

• 1.
  iFour ConsultancyAngular Directives https://www.ifourtechnolab.com/
• 2.
  Index ❏ Introduction ❏ ngIf ❏ngFor ❏ ngFor and Trackby ❏ ngSwitchCase ❏ ngClass ❏ ngStyle https://www.ifourtechnolab.com/
• 3.
  Introduction ❏ There arethree kinds of directives in Angular: ❖ Components— directives with a template. ❖ Structural directives— change the DOM layout by adding and removing DOM elements. ❖ Attribute directives— change the appearance or behavior of an element, component, or another directive. ❏ Structural Directives change the structure of the view. Two examples are NgFor and NgIf. ❏ Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name as in this. ❏ Attribute directives are used as attributes of elements. The built-in NgStyle directive in the Template Syntax guide, for example, can change several element styles at the same time. https://www.ifourtechnolab.com/
• 4.
  NgIf ❏ <div *ngIf="hero"class="name">{{hero.name}}</div> ❏ No brackets. No parentheses. Just *ngIf set to a string. ❏ The asterisk (*) is a convenience notation and the string is a micro syntax rather than the usual template expression. ❏ Render to <ng-template [ngIf]="hero"> <div class="name">{{hero.name}}</div> </ng-template> ❏ Angular desugars this notation into a marked-up <ng-template> that surrounds the host element and its descendents. Each structural directive does something different with that template. ❏ Three of the common, built-in structural directives—NgIf, NgFor, and NgSwitch...—are described in the Template https://www.ifourtechnolab.com/
• 5.
  NgFor <ul> <li *ngFor="let heroof heroes">{{hero.name}}</li> </ul> Ref -> https://blog.angular-university.io/angular-2-ngfor/ ❏ Angular transforms the *ngFor in similar fashion from asterisk (*) syntax to <ng-template> element. <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> Angular transforms the *ngFor in similar fashion from asterisk (*) syntax to <ng-template> element. <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> https://www.ifourtechnolab.com/
• 6.
  NgSwitch ❏ The AngularNgSwitch is actually a set of cooperating directives: a. NgSwitch, b. NgSwitchCase, and c. NgSwitchDefault. https://www.ifourtechnolab.com/
• 7.
  NgSwitch ❏ The AngularNgSwitch is actually a set of cooperating directives: a. NgSwitch, b. NgSwitchCase, and c. NgSwitchDefault. <ul [ngSwitch]="person.country"> <li *ngSwitchCase="'UK'" class="text-success"> {{ person.name }} ({{ person.country }}) </li> <li *ngSwitchCase="'USA'" class="text-primary"> {{ person.name }} ({{ person.country }}) </li> <li *ngSwitchDefault class="text-warning"> {{ person.name }} ({{ person.country }}) </li> </ul> https://www.ifourtechnolab.com/
• 8.
  NgClass ❏ Adds andremoves CSS classes on an HTML element. ❏ The CSS classes are updated as follows, depending on the type of the expression evaluation: a. string - the CSS classes listed in the string (space delimited) are added, b. Array - the CSS classes declared as Array elements are added, c. Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed. <some-element [ngClass]="'first second'">...</some-element> <some-element [ngClass]="['first', 'second']">...</some-element> <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element> <some-element [ngClass]="string: Exp|array: Exp|obj: Exp">...</some-element> <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element> https://www.ifourtechnolab.com/
• 9.
  NgStyle ❏ An attributedirective that updates styles for the containing HTML element. ❏ Sets one or more style properties, specified as colon-separated key-value pairs. ❏ The key is a style name, with an optional . ❏ <unit> suffix (such as 'top.px', 'font-style.em'). ❏ The value is an expression to be evaluated. ❏ The resulting non-null value, expressed in the given unit, is assigned to the given style property. ❏ If the result of evaluation is null, the corresponding style is removed. <some-element [ngStyle]="{'font-style': styleExp}">...</some-element> <some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element> <some-element [ngStyle]="objExp">...</some-element> https://www.ifourtechnolab.com/
• 10.
  Thank you https://www.ifourtechnolab.com/