Skip to main content

Angular 2: Difference between Component and Directive

Putting it straight:

When any ordinary class is decorated with @Directive decorator it becomes a directive. Directives can be used to extend beviour of html elements. There are three types of directives

  • Component Directive
  • Structural Directive
  • Attribute Directive
It means that Component is a type of directive, and since it is a very important type and central piece in angular based applications, angular team has provided a separate decorator "@Component" for it. 



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

@Directive({
    selector: "[disableOnClick]",
})
class DisableOnClick {
    @HostListener('click', ['$event.target'])
    onClick(element) {
        element.disabled= "disabled"
    }
}

The above directive can be used by any element like so:

<button disableOnClick></button>
On the other hand Components basically extend your applications HTML vocabulary by creating new reusable elements throughout the application.

@Component({
  selector: 'welcome',
  template: `
    <div>
      <p>Welcome {{username}}</p>
    </div>
  `
}) export class WelcomeComponent implements OnInit {
  @Input() username: string
  constructor() {}
}
And this component can be used anywhere in your application like so:

<welcome disableOnClick></welcome>
For further reading please check following links at angular.io 

Introduction to components
Directives

Comments

Popular posts from this blog

Html5 Canvas Drawing -- Draw dotted or dashed line

This post is for those who want to use html5 canvas for drawing. The canvas API now has built in methods to create lines with dashes. The method is called setLineDash. Following is the code sample to create dashed line. var canvas = document . getElementById ( "canvas" ); var ctx = canvas . getContext ( "2d" ); ctx . setLineDash ([ 5 , 3 ]); /*Dash width and spaces between dashes.*/ ctx . beginPath (); ctx . moveTo ( 0 , 100 ); ctx . lineTo ( 400 , 100 ); ctx . stroke (); If you want to draw lines having a custom style there is no methos in the API. But fortunately there is a way to achieve this. Following is a description about how I achieved this. You can set the stroke pattern on canvas context. Stroke pattern can be created using any image. You create image for your custom pattern and set strokeStyle of the context like the following: var linePattern; imageToUsedAsPattern.onload = function() { linePattern = context.createPattern(imageToU...

Difference between ng-template, ng-content and ng-container

While working on a very complex feature for a client in which I had to present hierarchical dynamic data in three column layout with ability to expand like google image search on each level, I came across ng-content, which seemed like a perfect fit for the solution I was thinking about implementing. But I got confused between ng-content and ng-container when I saw the generated html while debugging my code in developer console. I further investigated both ng-content and ng-container and decided to write my finding here in my blog for future references. If you are also wondering what are they for, read on. <ng-container> When you have to write different host elements to combine many structural component like the following <div *ngIf="condition"> <div *ngFor="..."> Some content here </div> </div> You get many unintentional host elements which are not required for your layout. It becomes a prolem when you have complex appl...

Angular 2+: ng-content

Have you ever felt the need of writing a component like the following <my-component> <div> Some text here </div> <div> Some text here </div> <div> Some text here </div> <div> Some text here </div> </my-component> Now your intention here is to have your custom component and keep having the additional html that you have written between statring and ending tags. If yes, then you are on the right place. Angular provides an element called ng-content which can used to write configurable components. This is called Component Projection, neaning the content that will be procvided inside the opening and closing brackets will be projected. It will be rendered inside a <ng-content> element. It means that you must include a <ng-content> tag somewhere in your components html template so that the provided content can be projected inside it. So your my-component should have a template like the following // myCompo...