Question: Why does the note.component.css file not work for dynamically created elements within note.component.ts in Angular 2? Is this the expected behavior?
The note.component.css can style elements that already exist in note.component.html. If I move the CSS styles to the "styles.css" file, it works. If I apply the styles with DOM manipulation, it also works.
Directory Structure:
app
components
note
note.component.css
note.component.html
note.component.ts
index.html
styles.css
note.component.html:
<div id="section1"></div>
note.component.css:
button{
background-color: green; //does not work
}
styles.css:
button{
background-color: green; //works
}
note.component.ts:
ngOnInit() {
var div = document.createElement("button");
div.innerHTML = "Hello world";
// div.style.backgroundColor = "green"; --- works
document.getElementById("section1").appendChild(div);
}