CODEWITHSUNDEEP
htmlcssangulartypescript
Stephan Pillhofer
Stephan Pillhofer

Reputation: 147

Angular - CSS properties of added class not showing

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>

Upvotes: 5

Views: 5234

Answers (1)

Sachin Shah
Sachin Shah

Reputation: 4533

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
}

Upvotes: 14

Related Questions