How to pass multiple parameter to @Directives in Angular ?
Last Updated :
26 Mar, 2024
Angular directives are TypeScript classes decorated with the @Directive
decorator. These are powerful tools for manipulating the DOM and adding behavior to elements. They can modify the behavior or appearance of DOM elements within an Angular application.
Directives can be broadly categorized into three types:
- Component Directives: These are directives with a template and can be used as standalone components.
- Attribute Directives: These change the appearance or behavior of an element, component, or another directive.
- Structural Directives: These change the DOM layout by adding or removing elements.
We will discuss the following approaches to pass multiple parameter to @directives in Angular:
Steps to Create Angular Project
Step 1: Create a new Angular project using the following command.
ng new gfg-directives
Folder Structure:
Project Structure of the new Angular applicationDependencies:
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.0",
"@angular/cli": "^17.3.0",
"@angular/compiler-cli": "^17.3.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.4.2"
}
Approach 1: Using Component Directives
Create a new component suing the following command.
ng generate component component-directive
Folder Structure:
Component StructureCode Example:
HTML
<!-- component-directive.component.html -->
<p>{{greetingMessage}}</p>
HTML
<!-- app.component.html -->
<app-component-directive
[firstName]="'Geeks'"
[lastName]="'ForGeeks'">
</app-component-directive>
JavaScript
//component-directive.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-component-directive',
templateUrl: './component-directive.component.html',
styleUrls: ['./component-directive.component.css']
})
export class ComponentDirectiveComponent {
@Input() firstName!: string;
@Input() lastName!: string;
greetingMessage = ""
ngOnInit() {
this.greetingMessage = `Welcome Back ${this.firstName}
${this.lastName}`
}
}
Output:
Browser
Approach 2: Using Attribute Directives
Create a new directive using the following command
ng generate directive attribute-directive
Folders Structure:
Attribute Directive StructureCode Example:
HTML
<!-- app.component.html -->
<div appAttributeDirective [colorName]="'yellow'" [opacity]=0.4>
Hover over me to see the magic!
</div>
JavaScript
//attribute-directive.directive.ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appAttributeDirective]'
})
export class AttributeDirectiveDirective {
constructor(private elementRef: ElementRef) { }
@Input() colorName!: string;
@Input() opacity!: number;
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.colorName, this.opacity);
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight('', 1);
}
private highlight(color: string, opacity: number) {
this.elementRef.nativeElement.style.opacity = opacity;
this.elementRef.nativeElement.style.backgroundColor = color;
}
}
Output:
Browser
Approach 3: Using Structural Directives
Create a new directive using the following coammand.
ng generate directive structuredirective
Folder Structure:
Structure DirectiveCode Example:
HTML
<!-- app.component.html -->
<div *appStructuredirective="'GFGAllUsers';token:'AdminToken'"></div>
JavaScript
//structuredirective.directive.ts
import { Directive, Input } from '@angular/core';
@Directive({
selector: '[appStructuredirective]'
})
export class StructuredirectiveDirective {
@Input()
set appStructuredirective(value: string) {
console.log('appStructuredirective: ', value);
}
@Input()
set appStructuredirectiveToken(value: string) {
console.log('appStructuredirectiveToken: ', value);
}
}
Output:
Browser's Console
Similar Reads
How to pass two parameters to EventEmitter in Angular 9 ? In Angular, we can transmit the data in both directions i.e. inside: to the child component and outside: to the parent component. For sending data to the child component, we use property binding and for the latter we use EventEmitter. In this article, we will talk about the EventEmitter directive an
3 min read
How to pass input to a custom directive in Angular JS? In AngularJS, passing input to a custom directive allows the customization of components within an application. Directives can receive input via attributes, expressions, or controller functions, allowing for dynamic behavior and data binding. In this article, we will explore two different approaches
3 min read
How to Filter Multiple Values in AngularJS ? AngularJS is one of the popular frameworks of many web developers to create dynamic single-page web applications. To make the application more and more dynamic, we can use the filtering of data feature to dynamically show the data to the user as per the input or selection. These provide a better use
6 min read
Recursion in Angular Directives Recursion in Angular directives refers to the ability of a directive to include instances of itself within its template. This allows for the creation of nested structures and dynamic rendering based on the data. Recursive directives are useful when dealing with hierarchical data or tree-like structu
4 min read
How to call an Angular Pipe with Multiple Arguments ? Angular Pipes are a way to transform the format of output data for display. The data can be strings, currency amounts, dates, etc. Pipes are simple functions that accept an input and return a transformed value in a more technical understanding. In this article, we will see How to call an Angular Pip
3 min read
How to pass data from Parent to Child component in Angular ? We can use the @Input directive for passing the data from the Parent to Child component in AngularUsing Input Binding: @Input - We can use this directive inside the child component to access the data sent by the parent component. Here app.component is the Parent component and cdetail.component is th
2 min read