Updated April 7, 2023
Difference between Angular directives vs components
Angular components are the major UI building blocks of an Angular application, and the Angular components are a subset of Directives and Angular component are always associated with a template i.e. Angular Components have their own view whereas Angular Directives are used to add additional behavior to an existing DOM element or an existing component instance. Also, Angular Directives are of different types based on their usage. Let’s go over the difference between Angular Component and Directive in detail below. In this topic, we are going to learn about Angular directives vs components.
Head to Head Comparison Between Angular directives vs components (Infographics)
Below are the top differences between Angular directives and components
Key Comparison between Angular directives vs components
Using Angular Component and Angular Directive both are equally important and are used while building Angular Application. There are a couple of differences between Angular Component and Directive which are worth knowing as they will help us know where to use what.
One of the major differences between Angular Component and Angular Directive is that every Angular Component must and must have a view/template associated with it, without a view, Angular Component cannot be created whereas Directive does not have to particularly have view associated with it.
Angular Directive
Angular Directives are of different types,
Attribute Directive – Attribute directive is used when we want to change the appearance or behavior of the DOM element. This directive can be used for handling events like click, scroll, on blur etc. We can also pass values along with attribute directive.
Structural directives – These are Angular directives that change the DOM layout by adding and removing DOM elements.
Some examples of Built-in directives are NgStyle, NgClass, etc.
Angular Directives are used to design reusable components and can be used across angular applications. The various different directives can be used in a DOM as per the requirement. Directives don’t have a View or a template associated with it instead they capture events and perform required action. Another limitation with Angular Directives is that you cannot use pipes with an angular directive.
Example –
import {Directive} from '@angular/core';
@Directive({
selector: "[buttonClick]",
hostListeners: {
'click': 'onClick()',
},
})
class buttonClick {
constructor() {}
onClick() {
console.log(‘---- Button Event Has Been Clicked ----'); }
}
<button buttonClick>Testing Button Click</button>
The above line can be added to any HTML view where the buttonClick attribute is used to capture the click event and print the line —- Button Event Has Been Clicked —-
Angular Components
Whenever we want to register the Angular component we need to use meta-data annotation @Component. Angular Components are a subset of Angular Directive and they are always associated with a template/View. Unlike other directives, only one component can be instantiated for a given element in a template. Every Component in Angular belongs to a NgModule so that it can be available for being used by another component in your Angular Application.
To make the newly created Angular Component a member of NgModule, we should be adding this component name in the declarations field of the NgModule metadata. Components are typically used to create UI widgets and small components which are used across the application. Angular Component can also be used to define pipes. The component is used to break up the application into smaller components and make core readability better. @View decorator OR templateUrl template is mandatory when creating Angular Component.
Example
import {Component, View} from '@angular/core';
@Component({
selector: 'registration-form',
template: `
<div>
<h1>Registration Form</h1>
<div>{{fname}} {{lname}}</div>
<p>{{city}}</p>
</div>
`
})
class RegistrationForm {
@Input() fname: string
@Input() lname: string
@Input() city: string
constructor() {}
}
Comparison between Angular directives vs components
Listed below are the major differences between Angular directives and components
| #1. Annotation | ||
| Angular Directive
@Directive annotation is used in order to create a new Custom directive in the Angular Application |
Angular Component
@Component annotation is used in Angular application in order to create a Component |
|
| #2. View | ||
| Angular Directive
Angular Directives do not hold on to any particular view instead they can be used in any existing DOM to add behavior as per requirement. |
Angular Component
Inside the @Component annotation, a template field is used to provide a View of this particular Angular component
Example –
|
|
| #3. Usage | ||
| Angular Directive
Angular Directives are not limited to be used only as Attributes inside any DOM element, Angular comes with different types of directive such as Attribute Directive and structural directive. |
Angular Component
Angular Components can be used as many as any angular application requires. Only one Angular Component can be present for a particular view and this component can be used across angular application using the selector tag. |
|
| #4. When to Use | ||
| Angular Directive
The directive should be used whenever you need to add/modify existing DOM behavior based on some action or event performed. This Directive can be used in any other DOM element. This can be used we need to catch a Click event or a Scroll on UI.
|
Angular Component
Always use Angular Component when you need to create your own view that is attached to its behavior. This Component can be accessed by any other Component within the application. Unlike directives, only one component can be instantiated for a given element in a template. |
|
Conclusion
Angular directives and components are widely used while building an Angular application. Creating new Angular Components which are associated with a view and creating such multiple smaller components helps in code segregation and improves readability and maintains code re-usability. On other hand Angular directives are added or modify the existing DOM behavior and handle various different events such as click, blur, focus, scroll, etc. and appropriate action can be taken in the directive file. Knowing what to use when is all that you need to start with building Angular apps and using Angular directives or components.
Recommended Articles
This is a guide to Angular directives vs components. Here we discuss the Angular directives vs components key differences with infographics and comparison table. You may also have a look at the following articles to learn more –
