Angular-এ প্যারেন্ট কম্পোনেন্টে ডেটা প্রেরণ

চাইল্ড কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ডেটা প্রেরণ করা সম্ভব। এটি বিশেষ অবজেক্ট EventEmitter এবং মেথড emit ব্যবহার করে ইভেন্ট নির্গত করার মাধ্যমে করা হয়। চাইল্ড কম্পোনেন্ট ইভেন্ট নির্গত করবে, ইভেন্টের সাথে কিছু ডেটা প্রেরণ করবে, এবং প্যারেন্ট কম্পোনেন্ট ইভেন্টগুলি ধরবে, প্যারেন্ট কম্পোনেন্ট থেকে ডেটা পাবে।

চলুন অনুশীলনে চেষ্টা করি। এর জন্য আমাদের বেশ কয়েকটি ধাপ অনুসরণ করতে হবে। প্রথমে আমাদের চাইল্ড কম্পোনেন্টে ডেকোরেটর @Output এবং ক্লাস EventEmitter ইম্পোর্ট করতে হবে:

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

এখন চাইল্ড ক্লাসে একটি প্রপার্টি onData তৈরি করি, যার মান হবে একটি নতুন অবজেক্ট EventEmitter, যাতে একটি স্ট্রিং রয়েছে:

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
}

এখন একটি মেথড send তৈরি করি, যার কল প্রদত্ত টেক্সট সহ প্যারেন্ট কম্পোনেন্টে onData ইভেন্ট নির্গত করবে:

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
	
	send() {
		this.onData.emit('xxx');
	}
}

চাইল্ড কম্পোনেন্টের টেমপ্লেটে একটি বাটন তৈরি করি, যাতে ক্লিক করলে send মেথড কল হবে:

<button (click)="send()">
	send data
</button>

প্যারেন্ট কম্পোনেন্টে একটি মেথড onData তৈরি করি, যা স্বয়ংক্রিয়ভাবে কল হবে যখন চাইল্ড কম্পোনেন্ট থেকে সংশ্লিষ্ট ইভেন্ট নির্গত হবে। মেথডের প্যারামিটারে প্রেরিত ডেটা পৌঁছাবে:

export class AppComponent {
	public onData(data: string) {
		console.log(data);
	}
}

প্যারেন্ট কম্পোনেন্টের টেমপ্লেটে চাইল্ড কম্পোনেন্ট ট্যাগে ইভেন্ট বাইন্ড করি:

<app-user (onData)="onData($event)"></app-user>

চাইল্ড কম্পোনেন্টে তিনটি বাটন তৈরি করুন, যা বিভিন্ন ইভেন্ট নির্গত করে। প্যারেন্ট কম্পোনেন্টে নির্গত ইভেন্টগুলি ধরুন।