Angular 2 Changer le texte de l'élément HTML

Question

Je veux changer le texte d'un élément html.

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
    }

Si vous pouviez fournir un exemple de code pour savoir comment faire cela, ce serait bien !.

Answer 1

Utilisez interpolation en utilisant les doubles accolades {{ }} et liez vos FirstName et LastName. En savoir plus sur template syntax .

Changez votre HTML en suivant:

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

... et dans votre profile.component.ts:

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

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

Answer 2

Étape 1: -au fichier HTML (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>

Étape 2: Au fichier ts (profile.component.ts)

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