@Input u @Output huma l-mod standard li bih komponent ġenitur u bint jikkomunikaw: tippassa d-data (ġenitur → bint), u tibgħat avvenimenti (bint → ġenitur). Dan jirrifletti l-mudell universali "props l-isfel, avvenimenti l-fuq".
@Input u @Output huma l-mod standard li bih komponent ġenitur u bint jikkomunikaw: tippassa d-data (ġenitur → bint), u tibgħat avvenimenti (bint → ġenitur). Dan jirrifletti l-mudell universali "props l-isfel, avvenimenti l-fuq".
@Input@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>
Il-komponent bint issamm permezz ta' EventEmitter; il-komponent ġenitur jirbleggħa miegħu b' (eventName) u jirċievi l-payload bħala $event. Il-bint qatt ma tbiddel id-data tal-ġenitur direttament — hi tittlob l-azzjoni billi tissamm.
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
Angular riċenti iżid il-funzjonijiet input()/output() ibbażati fuq sinjal bħala alternattiva.
@Input/@Output huma l-qalb tal-komunikazzjoni bejn ġenitur u bint u tal-komponenti li jistgħu jintużaw mill-ġdid fi Angular — jinfurzaw fluss ta' data f'direzzjoni waħda (l-isfel permezz ta' inputs, l-fuq permezz ta' avvenimenti) li jtejjeb id-data prevedibbli u l-komponenti mhux magħquda.
L-għarfien ta' din il-parja huwa essenzjali għall-kompożizzjoni ta' kwalunkwe UI ta' Angular li mhiex trivjali; għall-komunikazzjoni bejn komponenti mhux relatati, minflok tintużaw servizz kondiviż jew librerija tal-istati.