[Fixed] @Directive vs @Component in Angular


What is the difference between @Component and @Directive in Angular?
Both of them seem to do the same task and have the same attributes.

What are the use cases and when to prefer one over another?


A @Component requires a view whereas a @Directive does not.


I liken a @Directive to an Angular 1.0 directive with the option restrict: 'A' (Directives aren’t limited to attribute usage.) Directives add behaviour to an existing DOM element or an existing component instance. One example use case for a directive would be to log a click on an element.

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

    selector: "[logOnClick]",
    hostListeners: {
        'click': 'onClick()',
class LogOnClick {
    constructor() {}
    onClick() { console.log('Element clicked!'); }

Which would be used like so:

<button logOnClick>I log when clicked!</button>


A component, rather than adding/modifying behaviour, actually creates its own view (hierarchy of DOM elements) with attached behaviour. An example use case for this might be a contact card component:

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

  selector: 'contact-card',
  template: `
class ContactCard {
  @Input() name: string
  @Input() city: string
  constructor() {}

Which would be used like so:

<contact-card [name]="'foo'" [city]="'bar'"></contact-card>

ContactCard is a reusable UI component that we could use anywhere in our application, even within other components. These basically make up the UI building blocks of our applications.

In summary

Write a component when you want to create a reusable set of DOM elements of UI with custom behaviour. Write a directive when you want to write reusable behaviour to supplement existing DOM elements.


Leave a Reply

(*) Required, Your email will not be published