@Directive vs @Component in Angular
Asked Answered
S

12

558

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?

Sweatband answered 20/9, 2015 at 14:3 Comment(3)
A component is a directive with a template and the @Component decorator is actually a @Directive decorator extended with template-oriented features - source.Bigname
Directive vs Component is the new Service vs Factory. The confusion is also increased because when actually requiring other components from a component definition you specify them in the directives array... maybe Lida Weng comment below helps a bit clarifying that the component "it's actually an extended 'Directive' "Incompetent
components actually extend directive, they just require you to have a template (HTML) as opposed to directives.. So you'd use directive to modify existing html element, and component makes html elementsAmi
B
656

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

Directives

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';

@Directive({
    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>

Components

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';

@Component({
  selector: 'contact-card',
  template: `
    <div>
      <h1>{{name}}</h1>
      <p>{{city}}</p>
    </div>
  `
})
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.

Sources:

Blender answered 20/9, 2015 at 16:39 Comment(8)
does @directive annotation has template/templateUrl property ?Lowminded
Is this answer still true? The angular2 tutorial itself creates a component without a viewCovenantor
it's without a view, but templateurl or template are mandatory in the componentMagnitude
I like this kind of answers, but I would really appreciate an update when crucial changes happen to the framework.Pulque
This needs to be changed a little bit. The angular 2 API has changed. There is not View decorator anymore.Corn
Does this mean a component is a directive restricted to "E" with some template?Prowel
it may make sense to turn this into a wiki answer or to add to the documentation for Angular in stackoverflow documentationSelway
@jaker, do you mind adding the following article to your answer that explains the technical difference between the two?Tiv
S
92

Components

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

Directive

  1. To register directives we use @Directive meta-data annotation.
  2. Directive is used to add behavior to an existing DOM element.
  3. Directive is use to design re-usable components.
  4. Many directives can be used per DOM element.
  5. Directive doesn't use View.

Sources:

https://www.devdiscuss.com/difference-between-component-and-directive-in-angular-2/

Sideman answered 8/1, 2016 at 10:20 Comment(3)
Components - point 4. I thinks it's wrong - it can be used multiple times. it's actually an extended 'Directive'Pralltriller
Could have expanded this with examples.Tecumseh
Its not always Shadow Dom . Depends on the view encapsulationSplenitis
M
77

A component is a directive-with-a-template and the @Component decorator is actually a @Directive decorator extended with template-oriented features.

Morganne answered 21/4, 2016 at 12:6 Comment(1)
Not sure why you've got downvoted too much. It seems that @Component is a Directive with a template (to generate view) for me.Unsparing
F
22

In Angular 2 and above, “everything is a component.” Components are the main way we build and specify elements and logic on the page, through both custom elements and attributes that add functionality to our existing components.

http://learnangular2.com/components/

But what directives do then in Angular2+ ?

Attribute directives attach behaviour to elements.

There are three kinds of directives in Angular:

  1. Components—directives with a template.
  2. Structural directives—change the DOM layout by adding and removing DOM elements.
  3. Attribute directives—change the appearance or behaviour of an element, component, or another directive.

https://angular.io/docs/ts/latest/guide/attribute-directives.html

So what's happening in Angular2 and above is Directives are attributes which add functionalities to elements and components.

Look at the sample below from Angular.io:

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

So what it does, it will extends you components and HTML elements with adding yellow background and you can use it as below:

<p myHighlight>Highlight me!</p>

But components will create full elements with all functionalities like below:

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

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}. 
      <button (click)="sayMyName()">Say my name</button>
    </div>
   `
})
export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Alireza'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

and you can use it as below:

<my-component></my-component>

When we use the tag in the HTML, this component will be created and the constructor get called and rendered.

Fedora answered 16/4, 2017 at 2:16 Comment(0)
O
13

@Component is just a subclass of @Directive. Before deep-diving into this, we have to understand what is a @Directive...

@Directive is a decorator which is used to instruct the DOM to either add a new element or, remove or modify an existing element. So, whenever Angular comes across any decorators, it processes them at run time and modifies the DOM according to it.

We can create our Directives using @Directive as shown below

@Directive({
  selector: '[demoButtonColor]'
})
export class DemoButtonColorDirective {
  constructor(private elementRef: ElementRef) { };
  ngOnInit() {
    this.elementRef.nativeElement.style.backgroundColor = 'red';
  }
}

Usage in HTML

<button demoButtonColor>RED BUTTON</button>

Now let's see what is @Component decorator

@Component is a subclass of @Directive with one additional functionality. Using @Component, we can create our HTML template which can be injected into the DOM at run time.

@Component({
  selector: 'demo-color',
  template: '<h1>Hello There!</h1>'
})
class DemoColorComponent {}

We can reuse it in any other component as shown below

<div>
  <demo-color></demo-color>
</div>

To wrap it up, use @Directive to create a custom directive that can be used to modify the element or structure of the DOM. And use @Component, if you want to create the reusable UI components with custom behavior.

Overlord answered 6/1, 2022 at 7:9 Comment(0)
S
12

In a programming context, directives provide guidance to the compiler to alter how it would otherwise process input, i.e change some behaviour.

“Directives allow you to attach behavior to elements in the DOM.”

directives are split into the 3 categories:

  • Attribute
  • Structural
  • Component

Yes, in Angular 2, Components are a type of Directive. According to the Doc,

“Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.”

Angular 2 Components are an implementation of the Web Component concept. Web Components consists of several separate technologies. You can think of Web Components as reusable user interface widgets that are created using open Web technology.

  • So in summary directives The mechanism by which we attach behavior to elements in the DOM, consisting of Structural, Attribute and Component types.
  • Components are the specific type of directive that allows us to utilize web component functionality AKA reusability - encapsulated, reusable elements available throughout our application.
Sorrento answered 3/7, 2018 at 12:49 Comment(0)
B
11

Components

Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components. Our application in Angular is built on a component tree. Every component should have its template, styling, life cycle, selector, etc. So, every component has its structure You can treat them as an apart standalone small web application with own template and logic and a possibility to communicate and be used together with other components.

Sample .ts file for Component:

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

@Component({
    // component attributes
    selector: 'app-training',
    templateUrl: './app-training.component.html',
    styleUrls: ['./app-training.component.less']
})

export class AppTrainingComponent {
    title = 'my-app-training';
}

and its ./app.component.html template view:

Hello {{title}}

Then you can render AppTrainingComponent template with its logic in other components (after adding it into module)

<div>
   <app-training></app-training>
</div>

and the result will be

<div>
   my-app-training
</div>

as AppTrainingComponent was rendered here

See more about Components

Directives

Directive changes the appearance or behavior of an existing DOM element. For example [ngStyle] is a directive. Directives can extend components (can be used inside them) but they don't build a whole application. Let's say they just support components. They don't have its own template (but of course, you can manipulate template with them).

Sample directive:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

And its usage:

<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>

See more about directives

Bamako answered 30/8, 2019 at 7:2 Comment(1)
i want to use a combination, i need a directive so when users click on specific element i can open a popup which will be rendered using a component. you said directives can extend component? can you point me to right direction how to do so? i tried to put both directive in one class which is wrong.Caa
W
9

Change detection

Only @Component can be a node in the change detection tree. This means that you cannot set ChangeDetectionStrategy.OnPush in a @Directive. Despite this fact, a Directive can have @Input and @Output properties and you can inject and manipulate host component's ChangeDetectorRef from it. So use Components when you need a granular control over your change detection tree.

Wraith answered 30/3, 2018 at 4:51 Comment(0)
T
4

If you refer the official angular docs

https://angular.io/guide/attribute-directives

There are three kinds of directives in Angular:

  1. Components—directives with a template.
  2. Structural directives—change the DOM layout by adding and removing DOM elements. e.g *ngIf
  3. Attribute directives—change the appearance or behavior of an element, component, or another directive. e.g [ngClass].

As the Application grows we find difficulty in maintaining all these codes. For reusability purpose, we separate our logic in smart components and dumb components and we use directives (structural or attribute) to make changes in the DOM.

Trudeau answered 19/12, 2018 at 11:38 Comment(0)
A
0

A component is a single unit that encapsulates both view and logic whereas directives are used to enhance the behavior of components or dom elements and it doesn't have any templates.

Component extends directive so every component is a directive.

  • Both components and directives can have lifecycle hooks, input, output, providers and queries.
  • Components can additionally have viewproviders, changedetectionstrategy, templates, styles and view encapsulation.

We can use components to build a featureful element and directives to create customizations for the element.

Aklog answered 29/3, 2021 at 17:37 Comment(0)
M
0

DIRECTIVES:

Directives are classes that add additional behavior to elements.

Different types of directives are:

  1. COMPONENTS: These directive contains template
  2. Attribute directive: These types of directive change view or behavior of the element, component, other directive
  3. Structural directive: These directives change DOM layout by adding or deleting the DOM element.
Mall answered 21/8, 2021 at 14:56 Comment(0)
C
-1

Simplest Answer

Component: A main building block, used to add some DOM elements/Html.

Directive: Used to add some expressions, conditions and loop in DOM elements/HTML.

Cater answered 14/7, 2021 at 9:33 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.