Angular 16

PRAS AD
@input
@output
Template Reference Communication
@viewChild
Content Projection
 @Input
The @Input decorator allows you to pass data from a parent
component to a child component. It is typically used for properties
that a parent component wants to share with its child components.
 @Input
parent.component.ts: //Child Component:
import { Component } from '@angular/core';
child.component.ts:
@Component({ import { Component, Input } from '@angular/core';
selector: 'app-parent',
template: ` @Component({
<app-child [message]="parentMessage"></app-child> selector: 'app-child',
`, template: `
}) <p>{{ message }}</p>
export class ParentComponent { `,
parentMessage = 'Hello from the parent component!'; })
} export class ChildComponent {
@Input() message: string;
}
 @Input
parent.component.ts: //Child Component:
import { Component } from '@angular/core'; child.component.ts:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-parent', @Component({
template: ` selector: 'app-child',
<app-child [person]="parentPerson"></app-child> template: `
`, <p>Name: {{ person.name }}</p>
}) <p>Age: {{ person.age }}</p>
export class ParentComponent { `,
parentPerson = { })
name: 'Alice', export class ChildComponent {
age: 25, @Input() person: { name: string; age: number };
}; }
}
 @Output
The @Output decorator allows you to emit custom events from a child component to its
parent component. This is useful for handling user interactions in child components and
notifying the parent component about those interactions.
 @Output
//parent component //child Component
import { Component } from '@angular/core'; import { Component, Output, EventEmitter } from '@angular/core';

@Component({ @Component({
selector: 'app-parent', selector: 'app-child',
template: ` template: `
<app-child
(messageEvent)="receiveMessage($event)"> <button (click)="sendMessage()">Send Message</button>
</app-child> `,
<p>{{ receivedMessage }}</p> })
`, export class ChildComponent {
}) @Output() messageEvent = new EventEmitter<string>();
export class ParentComponent {
receivedMessage: string; sendMessage() {
this.messageEvent.emit('This is a message from the child
receiveMessage(message: string) { component.');
this.receivedMessage = message; }
} }
}
 @Output
parent.component.ts: child.component.ts:

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

@Component({ @Component({
selector: 'app-parent', selector: 'app-child',
template: ` template: `
<app-child <button (click)="sendMessage()">Send Message</button>
(messageEvent)="receiveMessage($event)"></app- `,
child> })
<p>{{ receivedMessage }}</p> export class ChildComponent {
`, @Output() messageEvent = new EventEmitter<string>();
})
export class ParentComponent { sendMessage() {
receivedMessage: string; const message = 'Hello from the child component!';
this.messageEvent.emit(message);
receiveMessage(message: string) { }
this.receivedMessage = message; }
}
}
 @viewChild
The @ViewChild decorator allows you to access a child component or an HTML element
within the component's view. This is particularly useful for programmatically interacting
with child components or DOM elements.
// ParentComponent
import { Component, ViewChild, AfterViewInit } from '@angular/core'; // ChildComponent
import { ChildComponent } from './child.component'; import { Component } from '@angular/core';

@Component({ @Component({
selector: 'app-parent', selector: 'app-child',
template: ` template: `
<app-child></app-child> <p>Child Component</p>
`, `,
}) })
export class ParentComponent implements AfterViewInit { export class ChildComponent {
@ViewChild(ChildComponent) child: ChildComponent; doSomething() {
console.log('Child component did something.');
ngAfterViewInit() { }
this.child.doSomething(); // Call a method in the ChildComponent }
}
}
parent.component.ts:
@viewChild
import { Component, ViewChild, AfterViewInit } from '@angular/core'; Child.component.ts
import { ChildComponent } from './child.component';
import { Component } from '@angular/core';
@Component({
selector: 'app-parent', @Component({
template: ` selector: 'app-child',
<app-child></app-child> template: `
<button (click)="invokeChildMethod()">Invoke Child <p>Child Component</p>
Method</button> `,
`, })
}) export class ChildComponent {
export class ParentComponent implements AfterViewInit { sayHello() {
@ViewChild(ChildComponent) childComponent: ChildComponent; console.log('Hello from the child component!');
}
ngAfterViewInit() { }
// Access child component after view is initialized
}

invokeChildMethod() {
this.childComponent.sayHello();
}
}
 Template Reference Variable
child.component.ts:
parent.component.ts: import { Component } from '@angular/core';
import { Component } from '@angular/core';
@Component({
@Component({ selector: 'app-child',
selector: 'app-parent', template: `
template: ` <button (click)="sendMessage()">Send Message</button>
<app-child #childRef></app-child> `,
<button })
(click)="receiveMessage(childRef.message)">Receive export class ChildComponent {
Message</button> message = 'Hello from the child component!';
`,
}) sendMessage() {
export class ParentComponent { console.log('Sending message to parent');
receiveMessage(message: string) { }
console.log('Received message from child:', message); }
}
}