Angular 2 Change text of HTML element

Question

I want to change the text of a html element.

profile.component.html

<div class="col col-sm-12">
  <h2>FirstName LastName</h2>
</div>

profile.component.ts

changeName():void{
        //Code to change the <h2> element
    }

If you could provide code example how to do this, it would be good!.

Answer 1

Use interpolation using the double curly braces {{ }} and bind your FirstName and LastName. Read more about template syntax.

Change your html to following:

<div class="col col-sm-12">
  <h2>{{ FirstName }} {{ LastName }}</h2>
</div>

... and in your profile.component.ts:

FirstName: string = '';
LastName: string = '';

changeName():void{
    this.FirstName = 'New First Name';
    this.LastName = 'New Last Name';
}