Writing css for Angular 2 View encapsulation via styleUrl - css

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

You need to use this css:
:host() {
display: block;
opacity:0.2;
}

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

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() { }
}