Home / Angular / What is the difference between Components and Directives in Angular.?

What is the difference between Components and Directives in Angular.?

Today we are going to see ” difference between Components and Directives in Angular “. if you want to know more about angular components read “Angular 5 Components Tutorial

Basically, there are three types of directives in angular4 according to documentation.

  • Component
  • Structural directives
  • Attribute directives

Windows Shared Hosting

is also a type of directive with template, styles and logic part which is the most famous type of directive among all in angular4. In this type of directive you can use other directives whether it is custom or built-in in the @component annotation like following:

selector: “my-app”
directives: [custom_directive_here] })
use this directive in your view as:


Structural directives
like *ngFor and *ngIf used for changes the DOM layout by adding and removing DOM elements.

Attribute directives
are used to give custom behavior or style to the existing elements by applying some functions/logic. like ngStyle is an attribute directive to give style dynamically to the elements. we can create our own directive and use this as Attribute of some predefined or custom elements, here is the example of the simple directive:

firstly we have to import directive from angular2/core

import {Directive, ElementRef, Renderer, Input} from ‘angular2/core’;

selector: ‘[Icheck]’,
export class RadioCheckbox {
the custom logic here,,,,
and we have to use this in the view like below:

<span Icheck>Hello Directive</span>.

difference between Components and Directives in Angular :

To register a component we use @Component meta-data annotation.
The component is a directive which uses shadow DOM to create encapsulated visual behavior called components. Components are typically used to create UI widgets.
The component is used to break up the application into smaller components.
4.Only one component can be present per DOM element.
@View decorator or templateURL template is mandatory in the component.

To register directives we use @Directive meta-data annotation.
The directive is used to add behavior to an existing DOM element.
Directive is use to design re-usable components.
Many directives can be used per DOM element.
The directive doesn’t use View.

About Mohammad Fareed

Software Engineer @ Tekzenit.

Check Also

What’s new In Angular 5? What Is the Difference Between Angular 4 and Angular 5?

Angular, one of the best open-source JavaScript frameworks for web application development, recently upgraded with …

Leave a Reply

Your email address will not be published. Required fields are marked *