Angular Css not being executed from angular component css

Question

My angular project is reading from a library that contains this code is a class:

class MyClass extends EventEmitter {

    constructor () {

      // add the element to the container
      this.loadingElement = document.createElement('div');
      this.loadingElement.className = "loading"
      this.loadingElement.innerText = 'Now Loading...';
    }

}

In my app.component.css I have this:

  #componentDivId .loading {
    position: absolute;
    top: 50%;
    left: 50%;
  }

This css is in app.component.css

How can I change this so it reads the css?

Shashank Vivek · Accepted Answer · 2020-05-11 15:37:56Z

2

You should look into ::ng-deep for overriding component styling. Also, may need to use !important in css file as and when required

Here is a demo code to help you understand how ::ng-deep can be used to push styling to a child component.

answered May 11, 2020 at 15:37

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mwilson Over a year ago

Or, do this the correct way by creating a loader component and injecting it when you need it. Direct DOM updates to angular are an anti-pattern

Collectives™ on Stack Overflow

Angular Css not being executed from angular component css

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related