How to change Button text in ionic2 using Renderer2

Question

I am not getting how to change the button text in ionic2 using ElementRef & Renderer2 class.

Here is what I have tried so far.

@Component({
  selector: 'component',
  templateUrl: `<button #button type="submit" class="form-button" ion-button 
                [disabled]="!form.valid">Change this text</button>`;
})
export class component {
   @ViewChild('button', {read: ElementRef}) 
   private button : ElementRef;

   constructor(private renderer: Renderer2){
   }

   ionViewDidLoad() {
      this.renderer.setProperty(this.button.nativeElement, 'value', 'Cute alligator');
   }
}

This setProperty only change the value of the button which is as attribute. But I want to change the button text which is now Change this text inside button.

Please help. Thanks.

Answer 1

Using Renderer

this.renderer.setProperty(this.button.nativeElement, 'textContent', 'Your Text')