Angular 2 Change text of HTML element
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';}
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"; }