Angular 3 Structural Directives(+/- components in HTML View)

EX 5 : 

*ngFor Directive

Create a new Angular Application in Visual Studio IDE Terminal

ng new EX5

Open folder EX5 and open src\app\app.component.html    file and add the following contents and save.

<div *ngFor = "let i of [1,3,5,7,9,11,12,14,15]">

  <li>No is : {{i}}<br></li>

</div>

run 

ng serve in Terminal. 

Once you get compiled successfully message, 

1. Open http://localhost:4200 in any browser to check the following o/p:  

No is : 1

No is : 3

No is : 5

No is : 7

No is : 9

No is : 11

No is : 12

No is : 14

No is : 15   

-----------------------------------------------------------------------------------------------------------------------------

EX 6 

*ngIf Directive

Open file src\app\app.component.ts file and add the displayButton object as shown below:

export class AppComponent {

    displayButton: boolean = true;

}

Open  src\app\app.component.html    file and add the following contents and save.

<div>

  <div *ngIf="displayButton">

     Message will disappear  when you click this button

        <button class="btn btn-sucess" (click)="showHide();">Click Me to Hide</button>

  </div>

run 

ng serve in Terminal. 

Once you get compiled successfully message, Open http://localhost:4200 in any browser to check the following o/p initially:  

Message will disappear when you click the button. with Click me to Hide Button. Once you click the button the browser screen will be blank.

---------------------------------------------------------------------------------------------------------------------------

EX 7

ngStyle Directive

Open  src\app\app.component.html    file and add the following contents and save.

<!-- //ngSTyle : changes the look and Behaviour of Web Page -->

<div *ngFor = "let i of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]">

    <div *ngIf = "(i%2 != 0)" [ngStyle]="{'background-color':'green'}">

        <li><button>{{i}}</button></li>

    </div>

    <div *ngIf = "(i%2 === 0)" [ngStyle]="{'background-color':'red'}">

        <li><button>{{i}}</button></li>

    </div>

</div>

run by ng serve in Terminal. 

Once you get compiled successfully message, Open http://localhost:4200 in any browser to check the following o/p:  

You will get screen like this

EX8

Pipes

Open file src\app\app.component.ts file and add the displayButton object as shown below:

export class AppComponent {

    textPipe = 'lower case to be converted to uppercase';

}

Open  src\app\app.component.html    file and add the following contents and save.

<div>

  Original Text:&nbsp;{{textPipe}}<br>

  To lowercase :<span style="color:'green'">&nbsp;{{textPipe |  lowercase}}</span>---> all Lowerase<br>

  To uppercase :<span style="color:'blue'">&nbsp;{{textPipe |  uppercase}}</span>---> all uppercase<br>

  Slicing:<span style="color:'red'">{{textPipe | slice:0:5}}</span>--->First 5 charecters of the original text<br>

</div>

run ng serve in Terminal. 

Once you get compiled successfully message, Open http://localhost:4200 in any browser to check the following o/p initially:  

In browser:

        Original Text: First Pipe

        To lowercase : first pipe---> all Lowerase

        To uppercase : FIRST PIPE---> all uppercase

        Slicing:First--->First 5 charecters of the original text

Happy Learning Angular! ☺☺☺