Angular - CSS properties of added class not showing

Question

I'm appending a childitem div to another div inside the same angular component. Then I assign a class to it. (using class list) It succesfully inserts the element and also adds the class to it but non of my css class properties are applied to it.

If I add the element manually inside my html code (including the class attribute) the element is shown correctly.

Why is this happening?

Typescript code:

let parent = document.getElementById('playingfield');
        let cactus = document.createElement('div');
        cactus.classList.add('cactus');
        parent.appendChild(cactus);

HTML code of manually inserting the div:

<div class="cactus"></div>

Answer 1

To apply the runtime css into your html you need to use :host feature of angular.

In your .css or .scss file set css by this way.

:host ::ng-deep .cactus{
    // Your css hear
}