Q21. How to achieve two way Binding without ngModel approach in angular 2?
Q22. What are template local variable and template reference variable in angular 2?
Q23. What is the difference between property binding and interpolation in angular 2?
Q24. What are observables in angular 2?
Q25. What is map in ReactJS observables ?
---------------------------------------------------------------------------------
Q21. How to achieve two way Binding without ngModel approach in angular 2?
Answer: Angular 2 has a feature called "template reference variables". With this feature, we are able to have direct access to an element. The template reference variable is declared by preceding an identifier with a hash/pound character (#).
Here, template is completely self-contained and it does not bind to the component. This solution will not work unless we bind to the element’s event. Angular only updates the bindings if something is done in response to asynchronous events, like keystrokes. This is the reason we bind keyup event to input element and we do nothing with this event. So, we are binding the number 0 with the event.
databinding.html
<div>
<h5>Two way binding (without ngModel directive) Example</h5>
Enter you Name: <input #txtName type = "text" (keyup)="0" />
<br/><br/>
<span> WelCome {{txtName.value}} ! </span>
</div>
look 4 keyword "Two-way binding without ngModel directive" in below url.
http://www.c-sharpcorner.com/article/data-binding-in-angular-2/
---------------------------------------------------------------------------------
Q22. What are template local variable and template reference variable in angular 2?
Answer:
Template local variable: They are declared with keyword let and
Reference variable: They are declared with keyword "#" or "ref-". reference variable can be accessed from any sibling or child element in template.
Template reference variable is a variable using which we can access DOM properties
eg.
<input type="text" #mobile placeholder="Enter Mobile Number">
In the above input text box #mobile is a template reference variable. To fetch DOM properties, we do as follows.
mobile.placeholder : It will give placeholder of our text box if we have specified.
mobile.value : It will give value of our text box.
mobile.type : It will give type of input element. In our example type is text.
https://www.concretepage.com/angular-2/angular-2-template-reference-variable-example---------------------------------------------------------------------------------
Q23. What is the difference between property binding and interpolation in angular 2?
Answer:
Property binding and interpolation both are one way data binding from data source to view target or we can say both are way of transferring value from component to html template but property binding does not convert result into string so whenever we have to bind something other than string we should use property binding and Interpolation is used as string interpolation, when we want to bind some string data.
https://www.youtube.com/watch?v=V1AVc5nL2ik
---------------------------------------------------------------------------------
Q24. What are observables in angular 2?
Answer:
https://www.youtube.com/watch?v=mSV0AihITxo
---------------------------------------------------------------------------------
Q25. What is map in ReactJS observables ?
Answer:
Map transform the items emitted by an Observable by applying a function to each item. The Map operator applies a function of your choosing to each item emitted by the source Observable, and returns an Observable that emits the results of these function applications
eg of Map.
(1) tranforming every return value form string to Int or vice versa.
(2) Multiplying returun value with current Currency exchange value so that we get the correct data.
---------------------------------------------------------------------------------
Q22. What are template local variable and template reference variable in angular 2?
Q23. What is the difference between property binding and interpolation in angular 2?
Q24. What are observables in angular 2?
Q25. What is map in ReactJS observables ?
---------------------------------------------------------------------------------
Answer: Angular 2 has a feature called "template reference variables". With this feature, we are able to have direct access to an element. The template reference variable is declared by preceding an identifier with a hash/pound character (#).
Here, template is completely self-contained and it does not bind to the component. This solution will not work unless we bind to the element’s event. Angular only updates the bindings if something is done in response to asynchronous events, like keystrokes. This is the reason we bind keyup event to input element and we do nothing with this event. So, we are binding the number 0 with the event.
databinding.html
<div>
<h5>Two way binding (without ngModel directive) Example</h5>
Enter you Name: <input #txtName type = "text" (keyup)="0" />
<br/><br/>
<span> WelCome {{txtName.value}} ! </span>
</div>
look 4 keyword "Two-way binding without ngModel directive" in below url.
http://www.c-sharpcorner.com/article/data-binding-in-angular-2/
---------------------------------------------------------------------------------
Q22. What are template local variable and template reference variable in angular 2?
Answer:
Template local variable: They are declared with keyword let and
Reference variable: They are declared with keyword "#" or "ref-". reference variable can be accessed from any sibling or child element in template.
Template reference variable is a variable using which we can access DOM properties
eg.
<input type="text" #mobile placeholder="Enter Mobile Number">
In the above input text box #mobile is a template reference variable. To fetch DOM properties, we do as follows.
mobile.placeholder : It will give placeholder of our text box if we have specified.
mobile.value : It will give value of our text box.
mobile.type : It will give type of input element. In our example type is text.
https://www.concretepage.com/angular-2/angular-2-template-reference-variable-example---------------------------------------------------------------------------------
Q23. What is the difference between property binding and interpolation in angular 2?
Answer:
Property binding and interpolation both are one way data binding from data source to view target or we can say both are way of transferring value from component to html template but property binding does not convert result into string so whenever we have to bind something other than string we should use property binding and Interpolation is used as string interpolation, when we want to bind some string data.
https://www.youtube.com/watch?v=V1AVc5nL2ik
---------------------------------------------------------------------------------
Q24. What are observables in angular 2?
Answer:
- Observables are asynchronous stream of data we can subscribe to.
- Observables work like an array thus we use MAP to iterate through the response.
- Observables help you manage asynchronous data, such as data coming from a backend service. To use observables, Angular uses a third-party library called Reactive Extensions (RxJS). Observables are a proposed feature for ES 2016
Observables are different from Promise based response.
(1) Observables work on multiple values over time while Promises return only single value.
(2) Observables are cancellable while Promises are not cancellable.
(3) Observables can be manipulated using javascript functions like map, filter, reduce.
https://www.youtube.com/watch?v=mSV0AihITxo
---------------------------------------------------------------------------------
Q25. What is map in ReactJS observables ?
Answer:
Map transform the items emitted by an Observable by applying a function to each item. The Map operator applies a function of your choosing to each item emitted by the source Observable, and returns an Observable that emits the results of these function applications
eg of Map.
(1) tranforming every return value form string to Int or vice versa.
(2) Multiplying returun value with current Currency exchange value so that we get the correct data.
---------------------------------------------------------------------------------
No comments:
Post a Comment