Changing button attributes dynamically


I added an HTML element in typescript thanks to the following code but my button keep basic design of a button. So I would like to find a way to give ion-button attribute to get a better design.

ngAfterViewInit () {
    this.but = document.createElement("button");
    this.but.innerHTML = "Dynamic button";
    this.but.setAttribute("ion-button", ""); //TO ADD IONIC DESIGN ATTRIBUTE
    var div_element = document.getElementById("button_container");


I’ve tried setAttribute function but it seems does not work…

Any idea ?

Hey dude,

i’m new to Ionic 2 but yesterday i tried to create a directive and found a renderer class.
Take a look at this:

you can import it from the angular/core and inject it:

import { Renderer } from 'angular2/'core;

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

  constructor(public renderer: Renderer) {

But i’ve not done such thing yet. Hope that helps.
In fact the renderer has a setProperty and setAttribute method. But it’s marked as experimental.
So good luck :slight_smile:

Thanks for your response, it does not resolve my problem but I’ve learned something wich will be very interesting in the future of Angular I guess.

So I’ve exactly the same problem now with this code :

      var parent_element: any = document.getElementById("but_container");
      var button:any = this.rd.createElement(parent_element, "button");
      this.rd.setElementAttribute(button, "ion-button", "");
      this.rd.setText(button, "TEST");