Angular 2 : HTML property binding

Question

I'm trying to understand the HTML bindings as I'm new to angular. Can someone please explain the difference between the following syntax:

<!-- 1 -->
<button name1 = "name2" >test</button>
<!-- 2 -->
<button (name1) = "name2" >test</button>
<!-- 3 -->
<button [name1] = "name2" >test</button>
<!-- 4 -->
<button ([name1]) = "name2" >test</button>

I have seen above in multiple places but could not understand the purpose of each case.

Thank you for the help!

Answer 1

There are two different thinks.. bindings and events:

Here's a live-demo: https://plnkr.co/edit/gfJL9RCyYriqzP9zWFSk?p=preview

Binding

• binds just a fixed string

<input value="test" />

• one-way binding a fixed string with expression-syntax

<input [value]="'test'" />

• one-way binding a variable test with expression-syntax

<input [value]="test" />

• one-way binding a variable test

<input value="{{ test }}" />

• two-way bindig the variable test to this input

<input [(ngModel)]="test" />

Events

• bind click-event to our onClick-function

<button (click)="onClick($event)"></button>

official docs: https://angular.io/docs/ts/latest/guide/template-syntax.html

Answer 2

Here is a practical example of event-binding, string-interpolation, and property binding

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  firstString: string = ' This is using string interpolation coming from a variable in a component ';
  secondString: string = 'This is using string interpolation coming from a method in a component ';
  thirdString: string = 'This is using property-binding';
  forthString: string= 'This is the string before you click';



  returnsecondString () {
    return this.secondString;

  }
  onClick(){
 this.forthString= 'This is the string after you click'
  }

}

<div class="col-lg-1">
  <UL class="list-group-item-info">
    <!--Format for string interpolation: {{ a string from type script or any string }} -->
    <!--Format for property binding:    []= ""  -->
    <!--format for event binding:       ()=""   -->
    <li><p> This is an example of string interpolation : {{firstString}}</p></li>
    <li><p> This is an example of string interpolation : {{returnsecondString()}}</p></li>
    <li><p [innerHTML]="thirdString"></p></li>

  <button class="btn btn-primary" (click)="onClick()"> Click here for Event Binding</button> <hr>
  <li><p>{{forthString}}</p></li>

  </UL>
</div>