What is property decorator in angular - amresh087/newronaRepos GitHub Wiki

In Angular, property decorators are used to decorate and configure properties within classes, particularly in components, directives, and services. Here are some of the most commonly used property decorators in Angular:

@Input(): This decorator is used to define an input property that allows data to be passed from a parent component to a child component.

   import { Component, Input } from '@angular/core';

   @Component({
     selector: 'app-child',
     template: `<p>{{ name }}</p>`
   })
   export class ChildComponent {
     @Input() name: string;
   }

@Output(): This decorator is used to define an output property that allows a child component to emit events to a parent component.

   import { Component, Output, EventEmitter } from '@angular/core';

   @Component({
     selector: 'app-child',
     template: `<button (click)="notifyParent()">Notify Parent</button>`
   })
   export class ChildComponent {
     @Output() notify = new EventEmitter<string>();

     notifyParent() {
       this.notify.emit('Notification from Child');
     }
   }

@ViewChild(): This decorator is used to get a reference to a child component, directive, or DOM element in the same template.

   import { Component, ViewChild, AfterViewInit } from '@angular/core';
   import { ChildComponent } from './child.component';

   @Component({
     selector: 'app-parent',
     template: `<app-child></app-child>`
   })
   export class ParentComponent implements AfterViewInit {
     @ViewChild(ChildComponent) childComponent: ChildComponent;

     ngAfterViewInit() {
       console.log(this.childComponent.name);
     }
   }

@ViewChildren(): This decorator is similar to @ViewChild but is used to get references to multiple child components, directives, or DOM elements.

   import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
   import { ChildComponent } from './child.component';

   @Component({
     selector: 'app-parent',
     template: `<app-child *ngFor="let child of children"></app-child>`
   })
   export class ParentComponent implements AfterViewInit {
     @ViewChildren(ChildComponent) childrenComponents: QueryList<ChildComponent>;

     ngAfterViewInit() {
       this.childrenComponents.forEach(child => console.log(child.name));
     }
   }

@ContentChild(): This decorator is used to get a reference to a projected content child component, directive, or DOM element.

   import { Component, ContentChild, AfterContentInit } from '@angular/core';

   @Component({
     selector: 'app-child',
     template: `<ng-content></ng-content>`
   })
   export class ChildComponent {
     @ContentChild('projectedContent') content: any;

     ngAfterContentInit() {
       console.log(this.content);
     }
   }

@ContentChildren(): This decorator is similar to @ContentChild but is used to get references to multiple projected content child components, directives, or DOM elements.

   import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';

   @Component({
     selector: 'app-child',
     template: `<ng-content></ng-content>`
   })
   export class ChildComponent implements AfterContentInit {
     @ContentChildren('projectedContent') contents: QueryList<any>;

     ngAfterContentInit() {
       this.contents.forEach(content => console.log(content));
     }
   }
⚠️ **GitHub.com Fallback** ⚠️