Changing button attributes dynamically

Ionic Framework ionic-v3
1

Hi,

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");
    div_element.appendChild(this.but);
  }

image

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

Any idea ?

2

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: https://angular.io/docs/js/latest/api/core/index/Renderer-class.html

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

import { Renderer } from 'angular2/'core;

@Component({
  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:

3

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 :

   ngAfterViewInit(){    
      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");
}