Table of Contents :
Defining Angular Components & Directives
Component & Directive Anatomy
Practical Implementation of an Angular Components
Practical Implementation of Angular Directives
Key differences between components and directives
Conclusion
Angular components are the basic building blocks of an angular application. The simple way to create an angular component is by using angular C.L.I i.e. Command Line Interface.
The command "ng generate component <component-name>" is used to do the same. By default in Angular version above 19, a standalone component is created. It contains 4 files.
The decorator which we use in the component class is @Component. This decorator is available in the "@angular/core" package.
On the other hand, angular directives are used to modify the appearance or behavior of other HTML elements elsewhere in the template. We generally use those directives inside as HTML elements enclosing their selector's name with square brackets.
Just like angular components, angular directives can be created using angular C.L.I. for which we should use the command "ng generate directive <directive-name>". After a directive is created, it has 2 files.
The decorator that defines a class as a directive is @Directive. This decorator is also present in the "@angular/core" package.
A component's configuration options are basically 'selector', 'templateUrl', 'styleUrl', etc.
A component can be made as a standalone or can be a part of only one component or of a module. For such a decision, another option 'standalone' is provided. If the value of this option is true, our component is a standalone component.
With the help of these components, we can create UI widgets, or we can even use them as child components (reusable components), etc. Inside the component class, we can provide all the logic, make API calls, etc. To load the component, we use the value of the 'selector' option inside HTML tags. They will act as custom elements in the template view. Thus, we can create our own html view.
A directive's configuration options are 'selector', 'standalone', ''providers", etc. A directive's main object is truly modifying the appearance or behavior of an HTML element. The directive's decorator @Directive, is a super set for @Component decorator. Angular contains 3 types of directives. They are Structural directives, Attribute directives & Custom directives
Examples of Structural directives are "*ngIf", "*ngFor", "*ngSwitch", "*ngSwitchCase", etc. They all are available inside the "@angular/common" package's CommonModule.
Now the Attribute directive is a type of structural directive, used for the modification around behavior & appearance of an HTML element. Built-in attribute directives are "ngClass", "ngStyle", etc. These directives too are present in CommonModule.
For making a custom directive, already the command is provided. Another thing about custom directives is that they can be used as attribute directives or even as an HTML element.
import { Component } from '@angular/core';
@Component({
selector: 'child-component',
template: `<h1 (click)="changeMessage()" >{{ myMessage }}</h1>`,
standalone: true,
})
class ChildComponent {
myMessage: string = 'Be Healthy ..!';
changeMessage() {
this.myMessage = 'Be Wealthy ..!';
}
}
@Component({
selector: 'app-root',
template: `<h1 (click)="changeMessage()" >{{ myMessage }}</h1>
<child-component></child-component>`,
standalone: true,
imports : [ChildComponent]
})
export class AppComponent {
myMessage: string = 'Be Wealthy ..!';
changeMessage() {
this.myMessage = 'Be Healthy ..!';
}
}Output:
import 'zone.js';
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[color]',
standalone: true
})
class ColorDirective {
constructor(private el : ElementRef) {
this.el.nativeElement.style.color = 'orange';
}
}
@Component({
selector: 'app-root',
template: `<h1 (click)="changeMessage()" color>{{ myMessage }}</h1>`,
standalone: true,
imports : [ColorDirective]
})
export class AppComponent {
myMessage: string = 'Be Wealthy ..!';
changeMessage() {
this.myMessage = 'Be Healthy ..!';
}
}Output:
Directives are used to modify the behavior of an HTML element thus we can modify any dom element with the help of directives, whereas components display a particular view anywhere on the browser. Developers can use these components accordingly to develop individual functionalities based on the requirements.
As we know, angular creates a shadow of existing dom elements for making change detection efficient. The process of removing dom elements can only be done by the involvement of directives especially structural directives, which can't be done with the help of components.
Accelerate your success with Angular Minds. Let us remove the obstacles and streamline the process for your next long-term Angular development projects
In Angular, both components and directives are fundamental building blocks, but they serve distinct purposes. Let's break down the key differences:
Components:
Self-contained units: Components encapsulate both the visual representation (template) and the underlying logic (class) of a specific UI element.
Own template: Each component has its own HTML template to define its structure and content.
Reusable: Components can be reused across different parts and smaller components of your application.
Hierarchical structure: They form a hierarchical structure, with a parent component and child components.
Data binding: Components can bind data to their templates and communicate with other components using input and output properties.
Lifecycle hooks: Components have lifecycle hooks that allow you to perform actions on another component at specific points in their lifecycle, such as initialization, change detection, and destruction.
Directives:
Modify DOM elements: Directives manipulate existing DOM elements to add behavior or change their behavior or appearance.
No inherent template: They don't have their templates but can modify the templates of other elements.
Types:
Attribute directives: Modify the appearance or behavior of an element, new directive, attribute, or property.
Structural directives: Modify the DOM structure of existing elements by adding, removing, or rearranging elements.
Reusable: Directives can be reused across different web components and applications.
Components: Use components to build reusable UI elements with their own templates and logic. This is the preferred approach for most UI development in Angular.
Directives: Use directives when you need to modify the behavior or appearance of existing DOM elements without creating a whole new element or component. This is useful for creating custom behaviors, data binding, or DOM manipulations.
Angular components and directives are essential concepts in Angular development, helping to build dynamic and interactive web applications. If we want to add additional behavior to our app, directives will play a very important role in the development.
Understanding the differences and use cases of directives and components is crucial for effective Angular development. Based on requirements & conditions, each developer must choose the right tool i.e. component or directive for the development.
By following best practices and using components and directives correctly, developers can build robust and efficient Angular applications.
This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.
