how to pass values to component in angular 2

Posted in AngularJs By Raj On March 8, 2017

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



  • Vikrant Raut

    nice one…… that solved my 75% off problem but still i have one question. i have a one drop down and i want to pass value of that drop into agnularjs component. drop down get value from json. can you please tell me how i will get value of drop down into component?