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.

It is required to use renderer2?

Paresh Gami
– Paresh Gami

2017-10-24 13:51:53 +00:00
Commented Oct 24, 2017 at 13:51 — Paresh Gami
– Paresh Gami, Commented Oct 24, 2017 at 13:51
you can normally bind property and change it.

Khurshid Ansari
– Khurshid Ansari

2019-04-18 07:46:47 +00:00
Commented Apr 18, 2019 at 7:46 — Khurshid Ansari
– Khurshid Ansari, Commented Apr 18, 2019 at 7:46

Nishant Singh · Accepted Answer · 2019-04-18 07:38:39Z

6

Using Renderer

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

answered Apr 18, 2019 at 7:38

Nishant Singh

1,4441 gold badge14 silver badges15 bronze badges

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

1 Comment

Rapido Over a year ago

This should be marked as correct answer because the question ask 'using renderer2'

Vivek Doshi · Accepted Answer · 2017-10-26 13:12:21Z

2

Just like this:

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

edited Oct 26, 2017 at 13:12

answered Oct 24, 2017 at 13:54

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

2 Comments

Maantu Das Over a year ago

Thanks @vivek-doshi. Its Works.

delpo Over a year ago

Please correct your answer in favor of Nishant Singh

Collectives™ on Stack Overflow

How to change Button text in ionic2 using Renderer2

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related