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

Question

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

Can you provide plunker or stackblitz example that will show us the issue? — yurzui
– yurzui, Commented Sep 25, 2017 at 11:17
plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=info ..this is the plunker of my code @yurzui — Deepak Pookkote
– Deepak Pookkote, Commented Sep 25, 2017 at 11:36
codepen.io/deepakpookkote/pen/xXRNao : -can you plz check this link and tell please tell me how to do this in angular ..when i do it alone its working ..but in angular css is not working fine @yurzui .. — Deepak Pookkote
– Deepak Pookkote, Commented Sep 25, 2017 at 11:42
Please take a look plnkr.co/edit/mCldcxqZom8L4OSSiUyz?p=preview — yurzui
– yurzui, Commented Sep 25, 2017 at 11:53

LLai · Accepted Answer · 2017-09-25 13:24:03Z

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)

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related