title: CSS values not applying on dynamically injected html div elements in Angular 4
body: <p><a href="https://codepen.io/deepakpookkote/pen/xXRNao" rel="noreferrer">Codepen Link</a></p>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <p>I'm sharing my code below:</p>
  
  <p>holidays.ts</p>
  
  <pre><code>@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('&lt;div class="blank"&gt;&lt;/div&gt;');
                    r++
                }
            }
            for (var c = 0; c &lt; 42 - r; c++) {
                if (c &gt;= e.length) {
                    l.append('&lt;div class="blank"&gt;&lt;/div&gt;')
                } else {
                    var v = e[c].day;
                    var m = g(new Date(t, n - 1, v)) ? '&lt;div class="today"&gt;' : "&lt;div&gt;";
                    l.append(m + "" + v +"&lt;div class='eventsPrint e-day-"+v+"'&gt;&lt;/div&gt;&lt;/div&gt;");
  
                }
            }
            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 &lt; 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 &lt; 7; e++) {
                f.append("&lt;div&gt;" + s[e].substring(0, 3) + "&lt;/div&gt;")
            }
        }
  
        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 &lt; 1) {
                  n = 12;
                  t--
              } else if (n &gt; 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( ()=&gt;{
        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 &amp;&amp; YY==2017){
            $(".e-day-26").html("&lt;ul&gt;&lt;li&gt;Event 1&lt;/li&gt;&lt;li&gt;Event 2&lt;/li&gt;&lt;/ul&gt;")
          }
  
        }
      } );
    }
    }
  
  }
  </code></pre>
  
  <p>only_holidays.css</p>
  
  <pre><code>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%;
  }
  </code></pre>
  
  <p>which ever styles that refers to (div) is not working//..</p>
  
  <p><a href="https://codepen.io/deepakpookkote/pen/xXRNao" rel="noreferrer">https://codepen.io/deepakpookkote/pen/xXRNao</a> </p>