A Detailed Comparison between Directive and Component

Today we discuss about the differences between @Component and @Directive

Component : Component is also a directive with it’s own view.

We use @ decorator to define Component

For exmple:

We can create component like this

Import { Component } from ‘@angular/core’;

@Component ({

      Selector: ‘my-component’,

      template:`<p>my template</p>`

})

In this component it display a paragraph,which is it’s own view.

For Example : In this example created a component for student.

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

@Component({

  selector:'stu-name',

  templateUrl:`app/studentName/studentName.component.html`

})

export class StudentName{

    studentData:any=[

      {name:"pankaj",address:"delhi",email:"[email protected]"},

      {name:"mohan",address:"palam",email:"[email protected]"},

      {name:"ramesh",address:"gtb nager",email:"[email protected]"},

      {name:"pervinder",address:"karol bagh",email:"[email protected]"},

      {name:"hervinder",address:"narayana",email:"[email protected]"},

      {name:"prerna",address:"piragrdhi",email:"[email protected]"},

      {name:"nidhi",address:"sadh nagar",email:"[email protected]"},

      {name:"rakesh",address:"dabri more",email:"[email protected]"}

  ]

}

In the above example show the view created by component

Directive : Directive has not it’s own view ,it changes the appearance of existing  DOM.

                 In our privious blog we allready discused about  directive and its type.

                 So in this time we only focus on difference .

There are two types of directive we used in our angular2/4

1.pre-built directive :- pre built directive has two types

1. structural directive.

     b)    Attribute directive.

2. Custom directive

1.pre-built directive :-ngFor,ngIf,ngClass are pre-built directive and these are respectively divided into structural and attribute directive.

Example of structural directive:-

   <div *ngIf = “currentStatus”>

   <p> status is active</p>

   </div>

This paragraph display when currentStatus is value true;

Another example :-

     <ul>

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

     </ul>

In This example  NgFor show the list of array element.

Another example of attribute directive is:-

NgClass:- It is used to apply style on an html element.

For example: <p [ngClass = “text-color”]>my birthday is 04 february</p>

In this example text-color is a css class,which are used on the paragraph .

//css

.text-color

{

color:red;

}

2. Custom Directive: - Creating a Directive as simple as creating a component ,we can create our own custom directive,rather than using the pre-built directive like ngClass ,ngFor etc.

To create our own custom directive we used the @Directive decorator .

For example :- In  this example we create a highlighte directive , that will highlight the background of the element that it is used on.

Steps to create custom directive:-

Step -1: create a file called app.highlightdirective.ts.

In this file we import the directive from angular2 library and used the @Directive decorator.

Import { Directive ,ElementRef } from ‘angular/core’;

@Directive({

Selector: [myhighlightdirective],

})

Export class heighlightDirective{

  constructor( el:ElementRef){

el.nativeElememt.style.backgroundv=”blue”}

}

step :6 Import the file in app.modul.ts

Import { Directive } from ‘app/highlightdirective’;

Import[

heighlightDirective

]

After creating custom directive we can use like this

//template

<p myhighlightdirective >This is my custom directive</p>

And the output is:-

This is my custom directive