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)
{{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>
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>
___________________________________________________________________________
