Angular Decorators & Metadata

Level : Beginner

Mentor: Shailendra Chauhan

Duration : 00:04:00

Importing Directives, Components, and Services

In Angular, you import various elements such as Directives, Components, and Services from specific modules using the import statement. This allows you to access and use these elements in your application.

Example

import { Directive, Component, Injectable } from '@angular/core';
import { MyService } from './my-service'; // Importing a custom service

Component Metadata Declaration

Angular components are defined using the @Component decorator. It contains metadata about the component such as its selector, template or templateUrl, styles or styleUrls, and more.

Example

import { Component } from '@angular/core';
@Component({
  selector: 'app-my-component',
  template: '<p>This is my component</p>',
  styles: ['p { color: blue; }']
})
export class MyComponent {}

Directive Metadata Declaration

Directives are declared using the @Directive decorator. It provides metadata about the directive, including its selector and any associated properties or behaviors.

Example

import { Directive } from '@angular/core';
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {}

Pipe Metadata Declaration

Pipes in Angular are defined using the @Pipe decorator. This decorator specifies the name of the pipe and can include additional configuration.

Example

import { Pipe } from '@angular/core';
@Pipe({
  name: 'myCustomPipe'
})
export class MyCustomPipe {}

Injectable Class Declaration

The @Injectable decorator is used to mark a class as injectable. It enables the class to be properly managed by Angular's dependency injection system.

Example

import { Injectable } from '@angular/core';
@Injectable()
export class MyService {}

Class Field Decorators

Angular provides various decorators that can be applied to class fields to enhance their behavior and interaction with the template and the component's lifecycle. Importing Elements for Class Field Decorators: Importing necessary elements from the @angular/core module allows you to apply class field decorators.

@Input Decorator

The @Input decorator is used to define an input property that can receive values from its parent component through property binding.

Example

import { Input } from '@angular/core';
@Input() myProperty: string;

@Output Decorator

The @Output decorator is used to define an output property that emits events to its parent component.

Example

import { Output, EventEmitter } from '@angular/core';
@Output() myEvent = new EventEmitter<void>();

@HostBinding Decorator

The @HostBinding decorator binds a property of the host element (the element the directive is applied to) to a property of the directive's class.

Example

import { HostBinding } from '@angular/core';
@HostBinding('class.valid') isValid: boolean = true;

@HostListener Decorator

The @HostListener decorator subscribes to a host element event and associates it with a method in the directive's class.

Example

import { HostListener } from '@angular/core';
@HostListener('click', ['$event'])
onClick(event: MouseEvent) {
  // Event handling logic
}

@ContentChild Decorator

The @ContentChild decorator binds a property of the directive's class to the first matching element in the content of the component.

Example

import { ContentChild } from '@angular/core';
@ContentChild(MyPredicateDirective) myChildComponent: MyPredicateDirective;

@ContentChildren Decorator

The @ContentChildren decorator binds a property of the directive's class to a collection of matching elements in the content.

Example

import { ContentChildren } from '@angular/core';
@ContentChildren(MyPredicateDirective) myChildComponents: QueryList<MyPredicateDirective>;

@ViewChild Decorator

The @ViewChild decorator binds a property of the directive's class to the first matching element in the view of the component.

Example

import { ViewChild } from '@angular/core';
@ViewChild(MyPredicateDirective) myChildComponent: MyPredicateDirective;

@ViewChildren Decorator

The @ViewChildren decorator binds a property of the directive's class to a collection of matching elements in the view.

Example

import { ViewChildren } from '@angular/core';
@ViewChildren(MyPredicateDirective) myChildComponents: QueryList<MyPredicateDirective>;

Self-paced Membership

Upto 60% OFF

Know More

Still have some questions? Let's discuss.