4-DataBinding btw Component(.ts)/view(.html) or Components

String interpolation :
{{title}} - always resolves to a string
ie, using double {{ }} will redirect to the value in the.ts file for the enclosed string, always referring to a string value.

Property binding:
Ex1:<input [value] = "functionName"> - always resolves to a variable or a function with name functionName, defined in the component class as shown below.
Ex2:<input required = true> - resolves to forcing the user to enter input in the input field, Just as a "required=true property in javascript.
Ex3:<input [required] = true> - this does nothing.

Example of "functionName " defined in a the relevant(The.ts file defining the component class related to the html in which this tag is embedded) component class definition is as follows:

Event binding:
<button<<eventtype(ex.click)>> = 'expression/function'> - events triggers on a element such as button results in an expression or triggers a function.
 -Component class can handle the event.
ex: <button (click)="alertme('heyyyy')" >Click me </button>
So, in the above case, a method called alertme, which takes in a parameter, 'heyyyy', is called from within the Component class.

____________________________________________________________
two-way data binding: 
1)data passed from/to Component(.ts) <==> View(.html)
using ngModel tag as in the example below to directly assign the value entered within the input tag to model or object as in the statement below.
<input [(ngModel)] = "model/object"> - Updates the model or object class in the component class

{{model}}

Objects in Typescript are created in similar syntax as in javascript.
>> Create a Object as below in Component class(.ts file)

• Component(.ts) --> View(.html)ie, view gets updated based on object defined in component class >> Now, access this object property in the related view/html file as below

• Component(.ts) <-- View(.html)ie, viewcomponent gets updated based on object modified in view via <input [(ngModel)]=""> tag >>Note that, as and when we update the input field, the value of the variable also gets updated,,, hence displays all the changes done in the <input tag.(refer the browser in the above figure)

2)data passed from Root==>Home

(@Input() directive)

Done in 4 steps(refer screenshot below:)

• (step1) Define the object/variable in the "Root" Component class(<<root>>.ts), that which you intend to pass to the "Home" component.  
• rootPerson = { rootPersonName: "rootdidi", rootPersonAge: "20"}
• (step2) define the RootComponent's Object/variable within the home-component's selector tag(<app-home></app-home>)used in the RootView(.html of root)
• <app-home [rootPersonVariable] = "rootPerson"></app-home>
• (step3) declare and import the @Input() directive within the Home component as below,
• @Input() rootPersonVariable;
• (step4) use the Root Variable like anyother HomeComponent variable as in code below:
• <p>access Root Person :
•     <label>{{rootPersonVariable.rootPersonName}}</label>
•  </p>

          Now, access the url(http://localhost:4200) to see the Root Object value displayed:

     

3)data passed from Home==>Root(or say Custom Event Binding)

(@Output() directive) 

Done in 4 steps(refer screenshot below:)

• (step1) Define the function in "Root" Component(.ts), that needs to get triggered on eventExecuted over a "Home" Component Tag(<app-home>) on Root View.  
• yell(){
•     alert("I am yelling from yell() of Root Component");
•   }
• (step2) Declare the call to the Root event function(yell()) of the "Root" Component(.ts), within the"Home" Component Tag(<app-home>) on Root View as below: 
• <app-home [rootPersonVariable]="rootPerson"
•   (onYellHomeEventVariable)="yell($event)"></app-home>
• (step3) Declare the above variable(onYellHomeEventVariable) using the @Output directive(also remember to import this in the .ts file) in the Home Component(.ts), as below:
• @Output  onYellHomeEventVariable= new EventEmitter();
• onYellEvent(e){
•   this.onYellHomeEventVariable.emit(e);
• }
• (step4) Define the above custom event(onYellEvent(e) on Home View's(.html) button click event, as below:
• <button (click)="onYellEvent($event)">click me</button>

Now, access the url(http://localhost:4200) and click on "Click me" button to see the Button event of Root fired while the event declared within Home tag<app-home>

___________________________________________________________________________