this is my html file
<div id="addingMembers">
</div>
<div class="selectMember">
<div class="selectTitle" (click)="addMember()">
<p class="selectMemTitle">Add a member</p>
<mat-icon aria-hidden="false" aria-label="add icon">add_circle_outline</mat-icon>
</div>
</div>
this is my Javascript File:
addMember(){
const x = document.getElementById('addingMembers');
x.innerHTML+ =
`<div id="members">
Hey I'm added
</div>
`;
}
Here, I want to style my members div using CSS File, but the styles are not applying on it:
#addingMembers #members{
background-color: red;
}
Use ::ng-deep pseudo-class to disables view-encapsulation. Or move your styles to global styles.
::ng-deep #addingMembers #members{
background-color: red;
}
Add a class to the control you are adding. Check below sample.
function tes() {
let change = document.getElementById("addingMembers");
change.innerHTML = '<input type="text" class="randomCls"/>';
} .randomCls{
background-color:red;
}<div id="addingMembers">
</div>
<input type="button" id="btn1" onclick="tes()" value="Check" />