how to pass values to component in angular 2

This article covers how to pass data to the component in angular 2, here I am taking simple login example that when we click on submit button of login component the username and password of the angular 2 component should be validated  against to the hardcoded credentials here, the two-way bindings helps us to read user entered values

Two Way binding:

The two-way bindings are when something changes from front-end then the same thing should reflect in controller and when something changes at controller level then it should reflect at frontend, the syntax for this in banana in the box [()]

here, I am assigning email and password to the “ngModel” directive and the syntax for this is [(ngModel)] = “email”

Event Databinding:

The angular 2 follows HTML element events such as click, blur, focus etc…, the syntax for this is  just put the HTML element event name in the parenthesis (click)

you can read email and password values by simply defining string’s in the LoginFormComponent, when we click on submit button the submit function will fire and validate user entered values aginst to the credentials

Finally, I am using interpolation to display the result on the component

bindings

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Visit Us On FacebookVisit Us On Google PlusVisit Us On Twitter