Working With Directive In Angular4

Hi Guys,
 

Welcome back , my first blog is on pipes and I hope you like it, if you found any mistakes, please feel free to comment or email.
 

So , it's time to start the new journey of Angular 4 .

photo-ref

  Today we discuss about Directive in angular 4.

Directive

So the first point we know about it ,is that Directive has power to manipulate the DOM directly.

That means we can add and delete the component or element of DOM permanently not temporarily like ngShow and ngHide .

For example: suppose we have a list of student data and we want to show it on the base of a condition.

And when condition matched it display it otherwise not.
 

Condition:- all user have a predefined password and when user enter the password the list of student data is popup .

To achieve this ,we need to manipulate the DOM,and here is the key point to arriving the concept of directive in angular 4.

Photo-ref

In Angular 2/4  we have three types of directive  

1. Component.

2. Structural Directives .

3. Attribute Directives.

1.Component

Component is also a directive with template

To genarate a component we use @Component decorator

 import { Component } from "@angular/core";

 @Component ({

                  Selector: ”my-component”,

                   templateUrl:`app/student/student.component.html`,

                   stylesUrl:[app/student/student.component.css ]

                         })

2.Structural directive:- It is used to change the layout of DOM ,by adding and removing of element from dom , that means it  shape/reshape the structure of DOM.

*ngIf  and *ngFor are example of Structural dirctive

we use the *(asterisk) to show drective name  

a). *ngIf : - NgIf directive add and delete the element from DOM .

For example: -  <div *ngIf = “showData”> {{student.name}}

In this example ngIf accept the boolean value and show on the base of condition,

If student data is available then it,s show the name otherwise it do not display it.

Suppose our ts file contain an array of student list like this

Private Student:any = [ ];

Private showData:boolean = true;

Student  =

        [

{name:”pankaj”,department:”front-end”,address:”delhi”},

{name:”manish”,department:”back-end”,address:”mumbai”},

{name:”vikash”,department:”management”,address:”delhi”}

    ]

b) *ngFor : - NgFor directive show the element of array.

     For example : suppose we want to display the student arraylist,

     In this case we use the *ngFor Structral directive to show list of data.

  <ul>

<li *ngFor = “let stu of student”>{{stu.name}}</li>

</ul>

In the above example we use the NgFor directive to display the list of data in an array.

Here we use the let keyword to create the template input variable of student array.

3. Attribute directive: To change the appearance and behaviour of DOM  element,component and other directive ,we can use it.

Example of Pre built attribute directive are-

1.  NgStyle

2. NgClass

3. NgMode

1. NgClass : - With the help of state of the component we can set the styles , we can also set multiple styles simultaneously.

             For example first we set the state of component is false and after a button click we want to               change the styles .

// In our ts file

Private  firststate:aboolean = false;

On method call

changeStyle()

{

This.firststate  = !this.firststate; //true

}

// In template

<div>

<p [class.colorchange]= “firststate”  >what is your favorite fruit</p>

<button type=”submit” (click)= “changeStyle();”>Magic</button>

</div>

//in css

.colorchange

{

color:#red;

}

So the first time it display result like

What is your favorite fruit.   // When it’s state is false

After button click the state of component become true and css or styles apply on it.

Thus after that the result is .

What is your favorite fruit.

2. NgStyle :- We can apply inline styles using ngStyle.

    For example :- <p [style.color  = “blue”]>My computer is very old</p>

3.NgModel :- when developing data entry form we need to show property and also show the update of property.

So accomplish this goal we use NgModel .

NgModel is used to bind the data(two way data binding ) thus,data update when user enter data in the form ngModel updates the DOM.

For example : we have a text box.and it display the default text and if we want to update the text box,

We can use ngModel.

<input type=”text” name=”name” [(ngModel)] = “name”  placeholder= “enter your name” >

Display: - {{name}}

Suppose we enter pankaj then it display

pankaj