Getting error while creating button in angular

Question

I want to create button dynamically through angular, i am doing this with JavaScript right now and able to create button, i am trying to change the classname of the button but getting below error ,

error:

Property 'className' does not exist on type HTMLCollectionOf<Element>.

code:

var element = document.getElementsByClassName("btnshow")
element.innerHTML = "btnhide";
console.log(HTMLElement);

Answer 1

document.getElementsByClassName returns an array. You cannot access element.innerHTML like that, you need to access it by index like element[0].innerHTML for example.

Answer 2

@jebprubio document.getElementByClassName() return HTMLCOllection of found elements.

In case you are sure, there will be a single element, below code will work:

var element = document.getElementsByClassName("btnshow");
element.innerHTML[0].innerHTML = "btnhide";

Kindly revert in case there is anything I missed.

Answer 3

I am not getting exact code which you have tried, but as you said you are trying to create dynamic button using Angular. As reusable components is a beauty of Angular, you could try making a reusable component.

Please see the following:

https://stackblitz.com/edit/angular-nmfpht