@Input અને @Output એ પેરેન્ટ અને ચાઇલ્ડ કમ્પોનેન્ટ સંચારનો સ્ટાન્ડર્ડ રીત છે: @Input ડેટા પાસ કરે છે (parent → child), અને ઈવેન્ટ મોકલે છે (child → parent). આ સર્વત્ર સામાન્ય "props down, events up" પેટર્નને પ્રતિબિંબિત કરે છે.
@Input અને @Output એ પેરેન્ટ અને ચાઇલ્ડ કમ્પોનેન્ટ સંચારનો સ્ટાન્ડર્ડ રીત છે: @Input ડેટા પાસ કરે છે (parent → child), અને ઈવેન્ટ મોકલે છે (child → parent). આ સર્વત્ર સામાન્ય "props down, events up" પેટર્નને પ્રતિબિંબિત કરે છે.
@Output// child: UserCardComponent
import { Component, Input } from "@angular/core";
@Component({ selector: "app-user-card", template: `<h2>{{ user.name }}</h2>` })
export class UserCardComponent {
@Input() user!: User; // receives data from the parent
@Input() showEmail = false; // with a default
}
<!-- parent passes data via property binding -->
<app-user-card [user]="currentUser" [showEmail]="true"></app-user-card>
// child emits an event the parent can listen to
import { Component, Output, EventEmitter } from "@angular/core";
@Component({
selector: "app-user-card",
template: `<button (click)="onDelete()">Delete</button>`,
})
export class UserCardComponent {
@Output() deleted = new EventEmitter<number>(); // declares an output event
onDelete() {
this.deleted.emit(this.user.id); // emit with a payload
}
}
<!-- parent listens via event binding -->
<app-user-card [user]="u" (deleted)="removeUser($event)"></app-user-card>
ચાઇલ્ડ EventEmitter દ્વારા ઈમિટ કરે છે; પેરેન્ટ તેને (eventName) સાથે બાઇન્ડ કરે છે અને પેલોડ $event તરીકે પ્રાપ્ત કરે છે. ચાઇલ્ડ ક્યારેય પેરેન્ટના ડેટાને સીધો સંશોધિત કરતું નથી — તે ઈમિટ કરીને અ્যાક્શન વિનંતી કરે છે.
Parent ──[user]──────────────→ Child (@Input: data down)
Parent ←──(deleted)=removeUser─ Child (@Output: events up)
name = input<string>(); // signal-based @Input (newer Angular)
deleted = output<number>(); // signal-based @Output
halt Angular સિગ્નલ-આધારિત input()/output() ફંક્શન્સને વિકલ્પ તરીકે ઉમેરે છે.
@Input/@Output Angular માં પેરેન્ટ-ચાઇલ્ડ સંચાર અને પુનઃવપરાશ્રય યોગ્ય કમ્પોનેન્ટ્સનું મૂળ છે — તેઓ એક-દિશીય ડેટા પ્રવાહ (ઇનપુટ્સ દ્વારા નીચે, ઈવેન્ટ્સ દ્વારા ઉપર) લાગુ કરે છે જે ડેટા અનુમાનક્ષમ રાખે છે અને કમ્પોનેન્ટ્સ અલગ હોય છે.
યે જોડીને સમજવું કોઈપણ બિનતુચ્છ Angular UI સંયોજિત કરવા માટે આવશ્યક છે; અસંબંધિત કમ્પોનેન્ટ્સ વચ્ચે સંચાર માટે, તમે તેના બદલે શેર્ડ સર્વિસ અથવા સ્ટેટ લાઇબ્રેરી ઉપયોગ કરશો.