@Input এবং @Output হল প্যারেন্ট এবং চাইল্ড কম্পোনেন্টের মধ্যে যোগাযোগের মান উপায়: ডেটা পাস করে (প্যারেন্ট → চাইল্ড), এবং ইভেন্ট পাঠায় (চাইল্ড → প্যারেন্ট)। এটি সর্বজনীন "props down, events up" প্যাটার্নকে প্রতিফলিত করে।
@Input এবং @Output হল প্যারেন্ট এবং চাইল্ড কম্পোনেন্টের মধ্যে যোগাযোগের মান উপায়: ডেটা পাস করে (প্যারেন্ট → চাইল্ড), এবং ইভেন্ট পাঠায় (চাইল্ড → প্যারেন্ট)। এটি সর্বজনীন "props down, events up" প্যাটার্নকে প্রতিফলিত করে।
@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>
চাইল্ড 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
সাম্প্রতিক Angular সিগন্যাল-ভিত্তিক input()/output() ফাংশন একটি বিকল্প হিসেবে যোগ করেছে।
@Input/@Output হল Angular-এ প্যারেন্ট-চাইল্ড যোগাযোগ এবং পুনর্ব্যবহারযোগ্য কম্পোনেন্টের মূল — এগুলি এক-মুখী ডেটা ফ্লো (inputs এর মাধ্যমে নিচে, events এর মাধ্যমে উপরে) প্রয়োগ করে যা ডেটাকে পূর্বাভাসযোগ্য এবং কম্পোনেন্টগুলিকে ডিকাপল্ড রাখে।
Angular-এ যেকোনো অ-তুচ্ছ UI তৈরি করার জন্য এই জোড়াটি বোঝা অপরিহার্য; সম্পর্কহীন কম্পোনেন্টগুলির মধ্যে যোগাযোগের জন্য, আপনি পরিবর্তে একটি ভাগ করা সেবা বা state লাইব্রেরি ব্যবহার করবেন।