Code Snippets – Table of Contents
- Builtin Angular Directives
Attribute Directive – ngClass and ngStyle
ngClass
- For using ngClass the styling should be in JSON Obect
- Advantage of using ngClass is applying more than one class to the DOM Element unlike class
- In the below code you see class which applies present or absent based on one true or false returned by getResult function
- In the registration.component.ts we have declared a JSON object which applies 2 classes present and normal or absent and bold based on true or false returned by getStatus(method)
Styling using class
registration.component.html
. . <td [class]="getStatus()?'present':'absent'">{{objStudent.science}}</td> . . .
Styling using ngClass
registration.component.html
. . <td [ngclass]="cssStyle">{{objStudent.science}}</td> . . .
registration.component.ts
. . export class RegistrationComponent implements OnInit { public cssStyle; ngOnInit() { this.cssStyle = { "present" : getStatus(), "absent" : !getStatus(), "normal" : getStatus() "bold" : !getStatus(), }; } } . . .
ngStyle
- ngStyle is to apply style directly instead of defining style using class
- Same registration.component.ts has been modified to take style attributed such as color and weight
registration.component.ts
. . export class RegistrationComponent implements OnInit { public cssStyle; ngOnInit() { this.cssStyle = { "background-color" : getStatus()?"green":"red", "font-weight" : getStatus()?"normal":"bold" }; } } . . .
There is an alternative for both above [class] and [ngClass] as below
. . <td [class.positive]="getStatus()" [class.negative]="!getStatus()">{{objStudent.science}}</td>. .
Similarly for [ngStyle] as below
. . <td [style.background-color]="getStatus()?'green':'red'">{{objStudent.science}}</td>. .
Structural Directive – ngIf, ngFor and ngSwitch
ngIf
- In the below code we decide the words to be displayed based on the value returned by getStatus(objStudent) method
- Pass would be displayed if true or else fail would be returned
. . <span *ngIf="getStatus(objStudent)">Pass</span> <span *ngIf="!getStatus(objStudent)">Fail</span> .
ngFor
- In the below code we use *ngFor loop to iterate over array of student object
- We are generating serial no for first column by adding 1 to variable i and displaying name of student in second column
- *ngFor has other loacl values apart from indes such as even, odd, first, last based on which manipulations could be carried out
registration.component.ts
. . export class RegistrationComponent implements OnInit { public arrStudent:Array<Student>; ngOnInit() { this.arrStudent = [new Student(101, 'Mugil', 31, 74, 65,55,64,84), new Student(102, 'Manasa', 26, 31, 65,55,86,84), new Student(103, 'Kavitha', 27, 90, 65,60,84,46), new Student(104, 'Renu', 28, 31, 65,55,84,46), new Student(105, 'Joseph', 23, 31, 65,55,89,84)]; } . . }
registration.component.ts
. . <tr> <th>Sno</th> <th>Student ID</th> </tr> <tbody> <tr *ngFor="let objStudent of arrStudent; index as i;"> <td>{{i+1}}</td> <td>{{objStudent.studentId}}</td> . . . . </tr> </tbody> . .
Now let’s see a simple example of applying a different color to text based on odd and even rows
registration.component.ts
. . <tr *ngFor="let objStudent of arrStudent; index as i;odd as isOdd; even as isEven" [class]="isOdd?'odd':'even'"> . <td>{{i+1}}</td> <td>{{objStudent.studentId}}</td> . </tr>
the same code can be written as below where the only difference is styles are applied seperately evaluating for both odd and even.
registration.component.ts
. . <tr *ngFor="let objStudent of arrStudent; index as i;odd as isOdd; even as isEven" [class]="isOdd" [class.even]="isEven"> . <td>{{i+1}}</td> <td>{{objStudent.studentId}}</td> . </tr>
We can define the template directly in a component instead of giving the templateURL using a template and define styleURL instead of styles.
registration.component.ts
. . @Component({ selector: 'app-registration', template: '<tr> <td>{{objStudent.studentId}}</td> <td>{{objStudent.studentName}}</td> </tr>', styleUrls: ['./registration.component.css'] }) . . .
registration.component.ts
. . @Component({ selector : 'app-registration', templateURL : 'app-registration.html', styles : [' .present { background-color: greenyellow; } .absent { background-color: #fc8674; } '] }) . . .