এঙ্গুলার কম্পোনেন্ট ইনপুট এবং আউটপুট : এঙ্গুলার এপ্লিকেশন

angular

এঙ্গুলার ব্যবহার করতে গেলেই যে কয়েকটা জিনিসের খটকা লাগে, তাদের মধ্যে আছে কিছু চিন্হ

  • ফাস্ট ব্যাকেট ()
  • থার্ড ব্যাকেট []
  • থার্ড ব্রাকেট এর ভিতর ফাস্ট ব্রাকেট [()]
  • ডাবল সেকেন্ড ব্যাকেট: {{}}


এঙ্গুলার ফাস্ট ব্যাকেট ():

এনগুলারে ফাস্ট ব্র্যাকেট দিয়ে কম্পোনেন্ট থেকে ডাটা আউটপুট বুঝায়। আরো সহজ করে বললে ডাটা রিটার্ন বুঝায়। অর্থাৎ, কম্পোনেন্ট কাজ শেষ করে কিভাবে ডাটা ফেরত দিবে। মজার ব্যাপার হচ্ছে, এনগুলারে ডাটা রিটার্ন না করে ডাটা সহ মেথড কল করে।


app-admin-partial-post-list সিলেক্টরে এ আমি শুধু মেথডের নাম দিয়ে দিচ্ছি copyPosTId($event), AdminPartialPostListComponent কম্পোনেন্ট থেকে যদি postId নামের কোন ইভেন্ট এমিট করা হয়, তাহলে তা মেথড copyPostId($event) কে কল করবে।


সিলেক্টর কল করা হচ্ছে

<app-admin-partial-post-list
        (postId)="copyPostId($event)">
</app-admin-partial-post-list>



কম্পোনেন্ট

export class AdminPartialPostListComponent implements OnInit{
  @Output()
  postId = new EventEmitter<string>();
..............................
  callCopyPostId(id: string) {
    this.postId.emit(id);
  }
}



থার্ড ব্যাকেট []:

এনগুলারে থার্ড ব্র্যাকেট দিয়ে সিলেক্টরে ডাটা দেয়া বুঝায়। এটা অনেকটা মেথড কল করার মতো। আমি ডিরেক্টিভ কল করার সাথে সাথে তাকে ডাটাও দিয়ে দিবো। এই ডাটা দিয়ে সে কিছু একটা করবে।

<app-page-body [page]="data"></app-page-body>

এখানে app-page-body সিলেক্টরে page নামের একটা input ফিল্ড থাকবে, যার মধ্যে আমি data দিয়েছি। এটা মেথড কল করার মতো কাজ করবে।

export class PageBodyComponent  {
  @Input()
  page: Page;
....
}




থার্ড ব্রাকেট এর ভিতর ফাস্ট ব্রাকেট [()]:

এনগুলারে এই সাইন বা চিন্হ দিয়ে ইনপুট/আউটপুট দুটাকেই বুঝায়।একে টু-ওয়ে ডাটা বাইন্ডিং বলে। উপরের দুটা বুঝতে পারলে, এটা হচ্ছে এমন যেখানে আপনি ডাটা দিবেন এবং ডাটা ফেরত পারেন।

<input type="text" [(ngModel)]="page.name" class="form-control">


এর মানে হচ্ছে, এখানে যা টাইপ করবেন, সেটাই ইনপুট আকারে চলে যাবে input ডিরেক্টিভ এ এবং আউটপুট হিসাবে page.name এ সেই ডাটা সেট করে দেয়া হবে।


ডাবল সেকেন্ড ব্যাকেট {{}}:

{{}} ব্যবহার করে এনগুলারে HTML এর ভিতর টাইপ স্ক্রিপ্ট/জাভা স্ক্রিপ্ট কোড লেখা যায়। একে এঙ্গুলার ইন্টারপোলেশন বলে।


ধন্যবাদ।