Custom Attribute Directive

1. Below is a Custom Attribute Directive which applies Background color to HTML Elements
2. However we could not apply anylogic based on which directive would apply like checking row is even or odd
3. Entry should be made in app.modules.ts for new directives created so it would be available

EvenrowHighlighterDirective.ts

import {AfterViewInit, Directive, ElementRef, OnInit} from '@angular/core';

@Directive({
  selector: '[appevenrow]'
})
export class EvenrowHighlighterDirective implements  OnInit, AfterViewInit{
  constructor(public elementRef: ElementRef) {
  }

  ngOnInit(): void {
    this.elementRef.nativeElement.style.backgroundColor = 'gray';
  }

  ngAfterViewInit(){
    //Add the above code here if ng-content and @child-content is used
  }
}

Custom Structural Directive

1. In below code we replace the functionality of ngIf using custom structural directive which checks for condition based on value set in isPresent
2. Similar to ElementRef, TemplateRef gives access to template
3. ViewContainer is a reference to the place where the Custom Structural Directive is placed
4. One of the key thing while using structural directive is selector, @Input should have the same name. This reason behind this is due to the fact that *ngIf would be convered to ng-template before rendering.ng-template works on refernce basis within html. So when reference and directive name are different it would end up in error

test.component.ts

import {Directive, Input, TemplateRef,  ViewContainerRef} from '@angular/core';

@Directive({
  selector: '[appDounless]'
})
export class DounlessDirective {

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

  @Input() set appDounless(condition: boolean){
    if(condition) {
      this.vcRef.createEmbeddedView(this.templateRef);
    }else{
      this.vcRef.clear();
    }
  }
}

test.component.ts

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

export class testComponent implements OnInit {

  public isPresent = true;

  ngOnInit() {
  }
}

test.component.html

<p appevenrow> This is Custom Attribute Directive</p>
<p *appDounless="isPresent">This is Custom Structural Directive</p>

Output

If Else
aboutus.component.ts

export class AboutusComponent implements OnInit {
  showMsg: boolean = true;
  .
  .
  .
}

aboutus.component.html

<p *ngIf='showMsg; else elseBlock'>aboutus works from If block!</p>

<ng-template #elseBlock>
    <p>aboutus works from else block!</p>
</ng-template>

Output

aboutus works from If block!

Switch Case
aboutus.component.ts

export class AboutusComponent implements OnInit {
  .
  .
  color : string =  'pink';
  .
  .
}

aboutus.component.html

<div [ngSwitch] = 'color'>
    <p *ngSwitchCase="'blue'">Its Blue Color</p>
    <p *ngSwitchCase="'red'">Its Red Color</p>
    <p *ngSwitchCase="'green'">Its Green Color</p>    
    <p *ngSwitchDefault>Its Default Color</p>    
</div>

Output

Its Default Color

Code Snippets – Table of Contents

1. Builtin Angular Directives
   1. Attribute Directive – NgStyle, NgClass
   2. Structural Directive – *NgIf, *NgFor, *NgSwitch

Attribute Directive – ngClass and ngStyle
ngClass

1. For using ngClass the styling should be in JSON Obect
2. Advantage of using ngClass is applying more than one class to the DOM Element unlike class
3. In the below code you see class which applies present or absent based on one true or false returned by getResult function
4. 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

1. ngStyle is to apply style directly instead of defining style using class
2. 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

1. In the below code we decide the words to be displayed based on the value returned by getStatus(objStudent) method
2. 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

1. In the below code we use *ngFor loop to iterate over array of student object
2. We are generating serial no for first column by adding 1 to variable i and displaying name of student in second column
3. *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;
                   }
                ']
})
.
.
.