How to pass multiple parameter to @Directives in Angular ?

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:

1. Component Directives: These are directives with a template and can be used as standalone components.
2. Attribute Directives: These change the appearance or behavior of an element, component, or another directive.
3. 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

Dependencies:

"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:

👁 component1

Code Example:

Output:

👁 output1

Approach 2: Using Attribute Directives

Create a new directive using the following command

ng generate directive attribute-directive

Folders Structure:

👁 attribute

Code Example:

Output:

👁 article-ezgifcom-crop

Approach 3: Using Structural Directives

Create a new directive using the following coammand.

ng generate directive structuredirective

Folder Structure:

👁 structure

Code Example:

Output:

👁 output3