Property Binding example in angular

Open Command prompt and use below commands to create angular project

E:

cd E:\TestProjects\Angular

ng new Property-Binding-example-in-angular --style=scss --routing --skip-install

cd Property-Binding-example-in-angular

npm install

Open project in visual studio code.

add logo.png in "assets/images" folder

Open app.component.ts file and update code as below

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  constructor() { }

   logoPath: string = 'assets/images/logo.png';

  ngOnInit() {}

}

Open app.component.html file and update code as below

<h1>Property Binding example in angular</h1>

<img [src]="logoPath" /><br>

Output:

Interpolation Binding example in angular

Open Command prompt and use below commands to create angular project

E:

cd E:\TestProjects\Angular

ng new Interpolation-Binding-example-in-angular --style=scss --routing --skip-install

cd Interpolation-Binding-example-in-angular

npm install

Open project in visual studio code.

Open app.component.ts file and update code as below

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  Id:number;

  Name:string;

  Email:string;

  City:string;

  ngOnInit()

  {

    this.Id=101;

    this.Name="adi";

    this.Email="jc.adi101@gmail.com";

    this.City="Bangalore";

  }

}

Open app.component.html file and update code as below

<h1>Interpolation Binding example</h1>

<table>

  <tr>

    <td>

      Id:

    </td>

    <td>

      {{Id}}

    </td>

  </tr>

  <tr>

    <td>

      Name:

    </td>

    <td>

      {{Name}}

    </td>

  </tr>

  <tr>

    <td>

      Email:

    </td>

    <td>

      {{Email}}

    </td>

  </tr>

  <tr>

    <td>

      City:

    </td>

    <td>

      {{City}}

    </td>

  </tr>

</table>

Output:

Data binding example in angular

Open Command prompt and use below commands to create angular project

E:

cd E:\TestProjects\Angular

ng new data-binding-example --style=scss --routing --skip-install

cd data-binding-example

npm install

Open project in visual studio code.

Open app.component.ts file and update code as below

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  Id:number;

  Name:string;

  Email:string;

  City:string;

  ngOnInit()

  {

    this.Id=101;

    this.Name="adi";

    this.Email="jc.adi101@gmail.com";

    this.City="Bangalore";

  }

}

Open app.component.html file and update code as below

<h1>Data binding example</h1>

<table>

  <tr>

    <td>

      Id:

    </td>

    <td>

      {{Id}}

    </td>

  </tr>

  <tr>

    <td>

      Name:

    </td>

    <td>

      {{Name}}

    </td>

  </tr>

  <tr>

    <td>

      Email:

    </td>

    <td>

      {{Email}}

    </td>

  </tr>

  <tr>

    <td>

      City:

    </td>

    <td>

      {{City}}

    </td>

  </tr>

</table>

run the project using ng serve --open command in VS code

Output: