Angular Js : Difference B/W & vs @ and =

Angular Js : Difference B/W & vs @ and =
Asked on October 16, 2018 in AngularJs.
Add Comment


  • 3 Answer(s)

    By using

    @: one-way binding

    =: two-way binding

    &: function binding

     

    Answered on October 16, 2018.
    Add Comment

    AngularJS – Isolated Scopes – @ vs = vs &

    @ – one way binding

    In directive:

    scope : { nameValue : "@name" }
    

    In view:

    <my-widget name="{{nameFromParentScope}}"></my-widget>
    

    = – two way binding

    In directive:

        scope : { nameValue : "=name" },
        link : function(scope)
          {
        scope.name = "Changing the value here will get reflected in parent scope value";
          }
    

     

    In view:

    <my-widget nameChange="onNameChange(newName)"></my-widget>
    
    
    Answered on October 16, 2018.
    Add Comment

    Here are the codes for implementing ,

    @: one-way binding:

    @Component({
      selector:'people',
      template: `
        {{person}}
    `
    })
    export class PeopleComponent {
    @Input()person
    }
    @Component({
      selector: 'app-root',
      template: `
        <people [person]="title"></people><button (click)="changeTitle()">ChngTitle</button>
    `,
    styles: []
    })
    export class AppComponent {
      title = 'app';
      constructor(){}
    changeTitle() {
      this.title = 'Angular app'
     }
    }
    

    Here is an example of two way binding:

    OCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>
    AngularJs Two Binding Example
    </title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
    var app = angular.module('angulartwobindapp', []);
    app.controller('angulartwobindingCtrl', function ($scope) {
    $scope.name = 'Welcome to Tutlane.com';
    });
    </script>
    </head>
    <body ng-app="angulartwobindapp">
    <div ng-controller="angulartwobindingCtrl">
    Enter Name : <input type="text" ng-model="name" style="width:250px" />
    <p>
    Entered Name: {{ name }}
    </p>
    </div>
    </body>
    </html>
    
    Answered on December 17, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.