Writing css for Angular 2 View encapsulation via styleUrl

Question

I am making a simple hello world app (currently migrating from angular 1) I used angular-cli to generate my components and it created a stylesheet and linked it in my component via styleUrls. None of my styles apply the way I think they are supposed to unless I do "viewEncapsulation.none." Is there something I'm missing? Or is there a better way to write out css for this?

If I use the default encapsulation ( ViewEncapsulation.Emulated or even native) my styles don't show up at all.

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';  

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

constructor() { }

ngOnInit() {
}
}

My CSS looks like this:

.app-header{
    display: block;
    opacity:0.2;
}

Answer 1

I think you need to set module:module.id in the component declaration for angular to search for the file in the right location. Have you verified that the CSS gets loaded in the non working case?

I am assuming you are using the app-header css somewhere in header.component.html? Try the below code.

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';  

@Component({
  module: module.id,
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() { }
}

Answer 2

Don't manipulate the component tag, this tag scope belongs to the parent component who uses it. manipulate only tags inside your html template component.

Answer 3

You need to use this css:

:host() {
    display: block;
    opacity:0.2;
}