CSS values not applying on dynamically injected html div elements in Angular 4

Question

I believe this is a css encapsulation issue. By default angular uses the Emulated encapsulation. This applies an attribute to all the DOM elements in your component and adds that attribute to your css rules. Since you are injecting html dynamically and not through angular, that attribute it not being added to your dynamic html. You can use the None option. This way angular doesn’t add the attribute to your css rules.

import { ViewEncapsulation } from '@angular/core';

@Component({
  templateUrl: './holidays.component.html',
  styleUrls:['./../../../webroot/css/pages/holidays/only_holidays.min.css'],
  encapsulation: ViewEncapsulation.None
})

Note, now your css won’t be encapsulated for just this component. It’ll be available to your entire app.

Docs on ViewEncapsulation: https://angular.io/api/core/ViewEncapsulation

Here is a good article on ViewEncapsulation (https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html)

Leave a Comment Cancel reply