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;
}

I edited my response. Have you resolved the issue?

Hampus
– Hampus

2016-12-28 16:37:48 +00:00
Commented Dec 28, 2016 at 16:37 — Hampus
– Hampus, Commented Dec 28, 2016 at 16:37

fidlip · Accepted Answer · 2017-01-12 12:48:29Z

1

You need to use this css:

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

answered Jan 12, 2017 at 12:48

fidlip

715 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Avi · Accepted Answer · 2016-12-25 19:07:54Z

0

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.

answered Dec 25, 2016 at 19:07

Avi

1,9744 gold badges19 silver badges31 bronze badges

Comments

Hampus · Accepted Answer · 2016-12-28 16:37:15Z

0

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

edited Dec 28, 2016 at 16:37

answered Dec 25, 2016 at 16:12

Hampus

2,8391 gold badge27 silver badges40 bronze badges

3 Comments

SD Dev Over a year ago

Thank you so do put this in my decorator? moduleId: 'app-header',

Avi Over a year ago

angular-cli does not use the module Id.

Hampus Over a year ago

Can you put the content of your component HTML file in the question as well so that I can give a more detailed and complete example.

Collectives™ on Stack Overflow

Writing css for Angular 2 View encapsulation via styleUrl

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related