13

I have a component page and corresponding style sheet, however the classes in the component.scss dosen't apply to the page. There are no errors, I am still wondering why?

This is my product-detailpage.component.html

<div>
  <h1>Product Detail Page</h1>
</div>

This is the .ts file

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {ProductdetailService} from '../productdetail.service';
@Component({
  selector: 'app-product-detailpage',
  templateUrl: './product-detailpage.component.html',
  styleUrls: ['./product-detailpage.component.scss']
})
export class ProductDetailpageComponent implements OnInit {

  constructor(private route: ActivatedRoute, private productData: ProductdetailService) {
    this.route.params.subscribe(params => console.log(params));
   }

  ngOnInit() {
  }

}

This is the .scss file

body{color:Red !important}
app-product-detailpage{
        h1{color:red !important}
}

However one thing I noticed was if I make changes to the global styles.css it works fine. just to check I changed the body color to green and it works.

My angular app is configured to work with scss. what could be the reason? can some one suggest?

3

3 Answers 3

10

Your SCSS won't work for your HTML file product-detailpage.component.html.

The reason is Angular uses shadow DOM for components. That means the tags <body> and <app-product-detailpage> are nowhere to be found in your component.

2
  • 2
    Nope, it is incorrect By default Angular emulates style encapsulation, it uses shadow DOM when you set view encapsulation to native ViewEncapsulation.Native
    – Vikas
    Commented Jun 26, 2018 at 3:03
  • blog.thoughtram.io/angular/2015/06/29/…
    – Vikas
    Commented Jun 26, 2018 at 3:05
8

As per the documentation, The style specified in the component can only be applied to its template, which excludes the component.

This is the reason why your styles are not working on the component from component's style.scss but are working fine from global style sheet.

One way of doing it is to use :host pseudo selector as per this documentation which allows to add styles on the container in which component is placed.

The documentation says -

The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template.

8

Because default css encapsulation in Angular is Emulated(ViewEncapsulation.Emulated) so Angular will render out like below:

input[_ngcontent-c0] {
    border-radius: 5px;
}

So if you want set style to the currently component, you can use Native option.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation : ViewEncapsulation.Native
})

It will render like as:

input {
    border-radius: 5px;
}

But finally I suggest you use global scss file to define style of <web component>.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.