CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2ionic3
Maantu Das
Maantu Das

Reputation: 117

How to change Button text in ionic2 using Renderer2

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.

Upvotes: 4

Views: 2570

Answers (2)

Nishant Singh
Nishant Singh

Reputation: 1364

Using Renderer 

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

Upvotes: 6

Vivek Doshi
Vivek Doshi

Reputation: 58563

Just like this:

this.button.nativeElement.innerText = 'your text';

Upvotes: 2

Related Questions