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!.

I really think you need to read the quick start tutorial if you are asking a question like this: angular.io/guide/quickstart — Ross Scott
– Ross Scott, Commented Sep 25, 2017 at 8:42
I will add that it's bad practice to use capitalized names for variables. — Ploppy
– Ploppy, Commented Sep 25, 2017 at 9:18

FAISAL · Accepted Answer · 2017-09-25 09:52:31Z

13

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';
}

edited Sep 25, 2017 at 9:52

answered Sep 25, 2017 at 8:47

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anup pandey · Accepted Answer · 2017-09-25 08:55:02Z

0

Step 1:-At html file (profile.component.html)

<div class="col col-sm-12">
  <h2 *ngIf="data==null; else elseBlock" >FirstName LastName</h2>
<ng-template #elseBlock><h2  [innerHTML] = "data"></h2></ng-template>
</div>

Step 2: At ts file (profile.component.ts)

public data:any;
changeName():void{
       this.data="Your Data";
    }

answered Sep 25, 2017 at 8:55

Anup pandey

4372 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular 2 Change text of HTML element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related