Decorators

Lesson content

What are Decorators? Decorators are special TypeScript functions that add metadata to classes, properties, methods, or parameters. Angular uses decorators to understand how a class should behave. Common Angular Decorators @Component() – Defines a component @Directive() – Defines a directive @Pipe() – Defines a pipe @Injectable() – Defines an injectable service @Input() – Receives data from a parent component @Output() – Sends events to a parent component Component Decorator Example import { Component } from '@angular/core'; @Component({ selector: 'app-user', standalone: true, template: '<h2>User Component</h2>' }) export class UserComponent {} How it Works TypeScript Class ↓ @Component Metadata ↓ Angular understands the class ↓ Component is created Input Decorator Example import { Component, Input } from '@angular/core'; @Component({ selector: 'app-user', standalone: true, template: '<h2>{{ name }}</h2>' }) export class UserComponent { @Input() name = ''; } Key Point Decorator = Metadata that tells Angular how to use a class or class member.