Angular 2 parent-child අතර data pass කරන්නේ කොහොමද

Angular 2 පාවිච්චි කරලා ලේසියෙන් parent component එකෙන් child component එකට data pass කරගන්නේ කොහොමද කියලා බලමු!

Q. 

මොකද්ද child සහ parent components කියන්නේ?

A. 

X කියලා component එකක්  Y කියන component එක පාවිච්චි කරනවා නම් ඒ අවස්ථාවට අනුව,

• X = parent component 

• Y = child component 

උදාහරණයක් විදියට අපි සලකමු Movie කියලා component එකක් තියෙනවා කියලා. ඒ Movie component එකේ Rating කියන component එක use කරලා තියෙනවා. 

Movie = parent component
Rating = child  component 

---

parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<child-app inputdata="data"> </child-app> '
})

export class ParentComponent {
  public data:string = "Hello!!!";
}

child.component.ts

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

@Component({
  selector: 'child-app',
  template: '<p>{{fromParent}}</p>'
})

export class ChildComponent {
   @Input('inputdata') fromParent:string;
}

ඔය අවස්ථාවේදී output එක විදියට data කියලා print වෙන්නේ. 

---

parent ගේ data කියන variable එක  ගන්න නම් කරන්න තියෙන්නේ, 

parent.component.ts එකේ <child-app inputdata="data"> කියන එක <child-app [inputdata]="data"> ලෙස වෙනස් කිරීම!

parent.component.ts

import { Component } from '@angular/core';

 @Component({
  selector: 'app-root',
  template: '<child-app [inputdata]="data"> </child-app> '
})

export class ParentComponent {
  public data:string = "Hello!!!";
}

දැන් output එක විදියට  print වෙන්නේ Hello!!!

මේ data pass කරන ඉතාම සරල විදියක්.  Angular 2 data binding වලදීත් මේ concept එකම තමා use වෙන්නේ!