16 April 2020

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:


    No comments:

    Post a Comment