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

Question

Codepen Link

I have an Angular calendar application that is running fine. without any errors. But the problem I\'m facing here is the CSS styles are not getting applied

Answer 1

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)