• Tutorials Logic, IN
  • +91 8092939553
  • info@tutorialslogic.com

Important Decorators

Decorators

Decorators are functions that are invoked with a prefixed "@" and adds metadata to a class, its members, or its method arguments. There are various decorators are available in angular, which are given below-

@NgModule()

It defines a module which can contains declarations, imports, exports, providers, entryComponents, bootstrap.

@Component()

It declares a class as a component and provides metadata about the component. It can contains moduleId, viewProviders, template, templateUrl, styles, styleUrls.

@Injectable()

It declares that a class can be provided and injected by other classes. It should be injected into the constructor when the dependency injector is creating an instance of this class.

@Directive()

It declares a typescript class as a directive and provides metadata about the directive. It can contains selector, inputs, outputs, host, providers, exportAs, queries. It has mainly four types, which includes component, structural, attribute, and custom directive.

@Pipe()

It declares a class as a pipe and provides metadata about the pipe. It can contains name, and pure.

@Input()

It declares an input property, that can be updated via property binding. It is used to receive data in child component from parent component.

@Output()

It declares an output property, that fires events which can be subscribed with an event binding. It is used to send data from child component to parent component.

@HostBinding()

It binds a host element property to a directive or component property.

@HostListener()

It subscribes to a host element event with a directive or component method, optionally passing an argument ($event).

@ContentChild()

It binds the first result of the component content query to a property of the class.

@ContentChildren()

It binds the results of the component content query to a property of the class.

@ViewChild()

It binds the first result of the component view query to a property of the class.

@ViewChildren()

It binds the results of the component view query to a property of the class.