Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Binding syntax in Angular2

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 307
    Comment on it

    Hello Readers,

    Data binding is a way where we can specify what user see with the application data values. Application should be easy to read, write i.e it should be user friendly, so data binding is very important part in application.
    Angular provides many type of data binding.

     

    Lets discuss about binding syntax in Angular2 : It depends on the what will the binding type. Which are as follows:

    • Property : It can be Element, Component, Directive property. Property is enclosed with  [ ] braces.

    Element Property -

    <img [src] = "image">

    Component Property -

    <my-app [user]="userName"></my-app>

    Directive Property -

    <div [ngClass] = "{selected: isSelected}"></div>
    • Event : It can be Element, Component, Directive event. Events are enclosed with ( ) braces.

    Element Property -

    <button (click) = "onClick()">Save</button>

    Component Property -

    <my-app (addUser)="userList()"></my-app>

    Directive Property -

    <div (myClick)="clicked=$event">click me</div>
    • Two-way :  Two-way binding on event and property. It is enclosed with [( )].
    <input [(ngModel)]="userName">
    • One-way (Interpolation) : It shows component property between two curly {{ }} braces.
    <p>{{userName}}</p>

    This is the basic overview on binding syntax and binding targets. Hope this will help you :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: