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 to the page.

I implemented this separately and its working fine. But when I include it in my angular css is not working. (The problem I'm facing here is I don't know to how to refer the 'div' that contain the contents).

I'm sharing my code below:

holidays.ts

@Component({
  //template: ``,
  templateUrl: './holidays.component.html',
  styleUrls: ['./../../../webroot/css/pages/holidays/only_holidays.min.css'],
  styles: [`



  `],
})
export class HolidaysPageComponent extends AppComponent {


  ngOnInit(){
    this.testFunction();
  }


  testFunction() {

    $(function() {
      function c() {
          p();
          var e = h();
          var r = 0;
          var u = false;
          l.empty();
          while (!u) {
              if (s[r] == e[0].weekday) {
                  u = true
              } else {
                  l.append('<div class="blank"></div>');
                  r++
              }
          }
          for (var c = 0; c < 42 - r; c++) {
              if (c >= e.length) {
                  l.append('<div class="blank"></div>')
              } else {
                  var v = e[c].day;
                  var m = g(new Date(t, n - 1, v)) ? '<div class="today">' : "<div>";
                  l.append(m + "" + v +"<div class='eventsPrint e-day-"+v+"'></div></div>");

              }
          }
          var y = o[n - 1];
          a.css("background-color", y).find("h1").text(i[n - 1] + " " + t);
          f.find("div").css("color", y);
          l.find(".today").css("background-color", y);
          d()
      }

      function h() {
          var e = [];
          for (var r = 1; r < v(t, n) + 1; r++) {
              e.push({
                  day: r,
                  weekday: s[m(t, n, r)]
              })
          }
          return e
      }

      function p() {
          f.empty();
          for (var e = 0; e < 7; e++) {
              f.append("<div>" + s[e].substring(0, 3) + "</div>")
          }
      }

      function d() {
          var t;
          var n = $("#calendar").css("width", e + "px");
          n.find(t = "#calendar_weekdays, #calendar_content").css("width", e + "px").find("div").css({
              width: e / 7 + "px",
              height: e / 7 + "px",
              "line-height": e / 7 + "px"
          });
          n.find("#calendar_header").css({
              height: e * (1 / 7) + "px"
          }).find('i[class^="icon-chevron"]').css("line-height", e * (1 / 7) + "px")
      }

      function v(e, t) {
          return (new Date(e, t, 0)).getDate()
      }

      function m(e, t, n) {
          return (new Date(e, t - 1, n)).getDay()
      }

      function g(e) {
          return y(new Date) == y(e)
      }

      function y(e) {
          return e.getFullYear() + "/" + (e.getMonth() + 1) + "/" + e.getDate()
      }

      function b() {
          var e = new Date;
          t = e.getFullYear();
          n = e.getMonth() + 1
      }

      var e = 480;
      var t = 2013;
      var n = 9;
      var r = [];
      var i = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
      var s = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
      var o = ["#16a085", "#1abc9c", "#c0392b", "#27ae60", "#FF6860", "#f39c12", "#f1c40f", "#e67e22", "#2ecc71", "#e74c3c", "#d35400", "#2c3e50"];
      var u = $("#calendar");
      var a = u.find("#calendar_header");
 // console.log(a[0]);
 ///=============================================================================================================================

    eventUpdater();

  //==============================================================================================================================
    var f = u.find("#calendar_weekdays");
    var l = u.find("#calendar_content");
    b();
    c();
    a.find('i[class^="icon-chevron"]').on("click", function() {
        var e = $(this);
        var r = function(e) {
            n = e == "next" ? n + 1 : n - 1;
            if (n < 1) {
                n = 12;
                t--
            } else if (n > 12) {
                n = 1;
                t++
            }
            c()
        };
        if (e.attr("class").indexOf("left") != -1) {
            r("previous")
        } else {
            r("next")
        }
        ///=============================================================================================================================

    eventUpdater();

  //==============================================================================================================================
    })
  })

  function eventUpdater(){
    let iM = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
    setTimeout( ()=>{
      let cald=$('#calendar_header h1').html();
      cald=cald.split(" ");
      let MM=cald[0]; let YY=cald[1];
      let curMonth=iM.indexOf(MM);
      if(curMonth){
      console.log( $('#calendar_header h1' ).html() , iM.indexOf(MM) ,YY  );
        $(".eventsPrint").html(''); //clearing all event display
        if(curMonth==8 && YY==2017){
          $(".e-day-26").html("<ul><li>Event 1</li><li>Event 2</li></ul>")
        }

      }
    } );
  }
  }

}

only_holidays.css

body{
  background-color: #F5F1E9;
}
#calendar{
  margin-left: auto;
  margin-right: auto;
  width: 520px;
  font-family: 'Lato', sans-serif;
}
#calendar_weekdays div{
  display:inline-block;
  vertical-align:top;
}
#calendar_content, #calendar_weekdays, #calendar_header{
  position: relative;
  width: 520px;
  overflow: hidden;
  float: left;
  z-index: 10;
}
#calendar_weekdays div, #calendar_content div{
  width:50px;
  height: 40px;
  overflow: hidden;
  text-align: center;
  background-color: #FFFFFF;
  color: #787878;
}
#calendar_content{
  -webkit-border-radius: 0px 0px 12px 12px;
  -moz-border-radius: 0px 0px 12px 12px;
  border-radius: 0px 0px 12px 12px;
}
#calendar_content div{
  float: left;
}
#calendar_content div:hover{
  background-color: #F8F8F8;
}
#calendar_content div.blank{
  background-color: #E8E8E8;
}
#calendar_header, #calendar_content div.today{
  zoom: 1;
  filter: alpha(opacity=70);
  opacity: 0.7;
}
#calendar_content div.today{
  color: #FFFFFF;
}
#calendar_header{
  width: 100%;
  height: 37px;
  text-align: center;
  background-color: #FF6860;
  padding: 18px 0;
  -webkit-border-radius: 12px 12px 0px 0px;
  -moz-border-radius: 12px 12px 0px 0px;
  border-radius: 12px 12px 0px 0px;
}
#calendar_header h1{
  font-size: 1.5em;
  color: #FFFFFF;
  float:left;
  width:70%;
}

which ever styles that refers to (div) is not working//..

https://codepen.io/deepakpookkote/pen/xXRNao

Solution

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)