Angular Directives
•
0 likes•723 views
The document summarizes Angular directives including ngIf, ngFor, ngSwitchCase, ngClass, and ngStyle. It describes how ngIf and ngFor are structural directives that change the DOM layout by adding and removing elements. NgIf and ngFor use an asterisk syntax that gets desugared into <ng-template> elements. NgFor iterates over collections and supports additional syntax like trackBy. NgSwitch is a set of cooperating directives that displays different elements based on a switch expression. NgClass and ngStyle are attribute directives that update CSS classes and styles on elements.
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to Angular Directives
Similar to Angular Directives (20)
More from iFour Technolab Pvt. Ltd.
More from iFour Technolab Pvt. Ltd. (20)
Recently uploaded
Recently uploaded (20)
Angular Directives
- 2. Index ❏ Introduction ❏ ngIf ❏ ngFor ❏ ngFor and Trackby ❏ ngSwitchCase ❏ ngClass ❏ ngStyle https://www.ifourtechnolab.com/
- 3. Introduction ❏ There are three 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 hero of 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 Angular NgSwitch is actually a set of cooperating directives: a. NgSwitch, b. NgSwitchCase, and c. NgSwitchDefault. https://www.ifourtechnolab.com/
- 7. NgSwitch ❏ The Angular NgSwitch 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 and removes 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 attribute directive 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/