CSS codes does not work in component CSS but works in style.css in Angular

Question

I have one file that use nested checkbox in angular. I have created one component and put the below code in ngOnInit() body

    const mainUl = document.getElementById('siteDetail');
    mainUl.classList.add('ulClassStyle');
    const names = ['Laptops', 'TVs', 'Microphones'];
    const secondLi = document.createElement('li');
    secondLi.classList.add('liClassStyle');
    const secondSpan = document.createElement('span');
    secondSpan.classList.add('caret');
    const secondMaincheckbox = document.createElement('input');
    secondMaincheckbox.type = 'checkbox';
    secondMaincheckbox.id = 'secondOption';
    secondMaincheckbox.checked = true;
    const secondMainlbl = document.createElement('label');
    secondMainlbl.id = 'label';
    secondMainlbl.htmlFor = 'secondOption';
    secondMainlbl.classList.add('labelClassStyle');
    secondMainlbl.appendChild(document.createTextNode('Electronics'));
    secondSpan.appendChild(secondMainlbl);
    secondLi.appendChild(secondMaincheckbox);
    secondLi.appendChild(secondSpan);

    const secondSubUl = document.createElement('ul');
    secondSubUl.classList.add('ulClassStyle');

    for (let i = 0; i < names.length; i++) {
        const name = names[i];
        const secondSubLi = document.createElement('li');
        secondSubLi.classList.add('liClassStyle');
        const secondSubCheckbox = document.createElement('input');
        secondSubCheckbox.type = 'checkbox';
        secondSubCheckbox.name = 'name' + i;
        secondSubCheckbox.value = 'value';
        secondSubCheckbox.id = 'secondSubCheckboxid' + i;
        secondSubCheckbox.checked = true;
        secondSubCheckbox.onclick = function() { secondMyfunction(this); };
        secondSubCheckbox.classList.add('secondSubOption');
        secondSubLi.appendChild(secondSubCheckbox);
        secondSubLi.appendChild(document.createTextNode(name));
        secondSubUl.appendChild(secondSubLi);
        secondSubUl.classList.add('nested');
    }
    secondLi.appendChild(secondSubUl);
    mainUl.appendChild(secondLi);

    const secondCheckboxes = document.querySelectorAll('input.secondSubOption');
    const secondCheckall = document.getElementById('secondOption');
        secondCheckall.onclick = function() {
        for (let i = 0; i < secondCheckboxes.length; i++) {
            secondCheckboxes[i].checked = this.checked;
        }
    };

    function secondMyfunction(checkBox) {
        const secondCheckedCount = document.querySelectorAll('input.secondSubOption:checked').length;
        secondCheckall.checked = secondCheckedCount > 0;
        secondCheckall.indeterminate = secondCheckedCount > 0 && secondCheckedCount < secondCheckboxes.length;
    }

    const secondToggler = document.getElementsByClassName('caret');
    for (let i = 0; i < secondToggler.length; i++) {
        secondToggler[i].addEventListener('click', function() {
            this.parentElement.querySelector('.nested').classList.toggle('active');
            this.classList.toggle('caret-down');
        });
    }

and then I wrote this in the CSS code:

body {
    color: #555;
    font-size: 1.25em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  hr {
    margin: 50px 0;
  }

  .ulClassStyle
  {
      list-style: none;
  }

  .container {
    margin: 40px auto;
    max-width: 700px;
  }

  .liClassStyle {
    margin-top: 1em;
  }

  .labelClassStyle {
    font-weight: bold;
  }
  .nested {
    display: none;
  }

  .caret {
    cursor: pointer;
    user-select: none;
  }

  .caret::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
  }

  .caret-down::before {
    transform: rotate(90deg);  
  }

  .active {
    display: block;
  }

If I put this CSS code in main css file that: style.css, it works fine without any problem as expected. But, If I put in the CSS for the component it does not work. Any idea why it is like this?!

Show us how you insert that css file in the components. Maybe that;s the problem — Mihai T, Oct 24 '19 at 12:37
You should read about the angular renderer and use it. It is not a good practice to do it the way you did it. — Adrian Sawicki, Oct 24 '19 at 12:40
I have discovered one interesting thing: If these items are static items then the code is applied on them. However, if these items are added during running time, the code is not applied on them. Is it like this?! — Abo Ahmed, Oct 24 '19 at 12:52
I think this styleUrls in @Component has some problems. If you want to access scss variables in it. You might end up add css dependencies in every component. And if you want to add special rules when a component is located in another component you need to do that in a global style anyway. In the end i prefer to put everything in the styles folder: https://medium.com/@osternaud_clem/organize-your-sass-files-b2c2513f3fcf — Jens Alenius, Oct 24 '19 at 13:32

score 2 · Accepted Answer · answered Oct 24 '19 at 12:31

2

Set encapsulation to None in the component in which style.css not working like this >

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
  encapsulation: ViewEncapsulation.None
})

answered Oct 24 '19 at 12:31

Inderjeet Klsi

104
3

2

It will make all styles of this component global and will effect other components as well – jitender Oct 24 '19 at 12:34

score 0 · Answer 2 · answered Oct 24 '19 at 12:39

Angular is working in the way that it's suppose to working if your write styles in component.css those will get applied to that particular component only.style.css contains global styles so they will get applied thoughout the application you have two option to make you style global here one can be encapsulation: ViewEncapsulation.None but that will make all styles in this component global and will affect other components as well other is use ::ng-deep to a particular style only eg

 ::ng-deep .liClassStyle {
    margin-top: 1em;
  }

So you should use styles applied to body etc in style.css and component related style in component.css

I think ng-deep is set to deprecated. – Jens Alenius Oct 24 '19 at 13:25 — Jens Alenius, Oct 24 '19 at 13:25

score 0 · Answer 3 · answered Oct 24 '19 at 13:32

I found that this problem is happening because I am adding these elements dynamically at the run the time. So, it must be added in the general style.css or write:

encapsulation: ViewEncapsulation.None

which will do the same as it make css general

Thanks for guide.

CSS codes does not work in component CSS but works in style.css in Angular

3 Answers3