I recently started working on a hello world application after migrating from obsolete Angular 1. I utilized angular-cli to create my components and it automatically generated a stylesheet which was linked in my component via styleUrls. However, I noticed that none of my styles were being applied as expected unless I used "viewEncapsulation.none." Am I overlooking something here? Is there a more effective way to handle CSS for this?
Whenever I try to use the default encapsulation (ViewEncapsulation.Emulated or native), my styles simply do not appear 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() {
}
}
This is what my CSS currently looks like:
.app-header{
display: block;
opacity:0.2;
}