Interpolation in angular 5

When we want to communicate from component class to template ,we can use interpolation which use the {{ expression }} to render the bound value to the component’s template.

Step 1 : Create an angular 5 project  from here https://programmergangtuts.blogspot.com/2018/02/creating-first-angular-5-project.html and copy and paste the following code in src->app->app.component.ts 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firstName:string="Mani"; //defining first name field in typescript
  lastName:string="Rai";  //defining last name field in typescript
  getFullName():string //method returning first name and last name
  {
    return this.firstName +" " +this.lastName;
  }
}

Step 2 : paste the following code in src->app->app.component.html 

Full Name : {{getFullName()}} //interpolation

Step 3 :  app.module.ts is root module which is shown below and AppModue is route modules which bootstraps and launches the angular application.

Step 4 : Go to View -> Integrated terminal then terminal will open .

Step 5 : type 'ng serve -- open ' in open terminal in step 5

Step 6 : Output is shown below :

 Happy Coding !!!