Angular2 css :host applying but not visible in browser

Question

I am having a bizarre issue whilst creating my first Angular2 app.

I am applying some CSS to a component host (example-component) yet it doesn't appear in the browser?

This is my first time posting for Angular in SO, so hopefully I include everything needed to attain some help.

example.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'crate',
  templateUrl: './app/folderA/folderAB/crate.html',
  styleUrls: ['./app/folderA/folderAB/crate.css']
})
export class MyComponent {}

index.html

crate.html

<div class="background">
    <div class="content">
        <p>Content</p>
    </div>
</div>

crate.css

:host-context(.lg){
    width: 100%;
    background-color: #000;
    border-radius: 25px;
}

What I don't understand, is that I open this in chrome & firefox, and I see the following CSS stated under rules for example.component.

.lg[_nghost-ims-2], .lg [_nghost-ims-2] {
    width: 100%;
    background-color: #000;
    border-radius: 25px;
}

It is correctly applying the CSS to example-component, but it is not being displayed / rendered in browser. What am I doing wrong / missing?

EDIT

The exact same issue applies even if I change crate.css to:

crate{
    width: 100%;
    background-color: #000;
    border-radius: 25px;
}

change 'styleUrls' to 'styles'?

Niles Tanner
– Niles Tanner

2016-10-16 05:21:27 +00:00
Commented Oct 16, 2016 at 5:21 — Niles Tanner
– Niles Tanner, Commented Oct 16, 2016 at 5:21
change :host-context (.lg){} to :host .lg{} and check.

micronyks
– micronyks

2016-10-16 05:27:30 +00:00
Commented Oct 16, 2016 at 5:27 — micronyks
– micronyks, Commented Oct 16, 2016 at 5:27
@micronyks Doesn't apply it to the element.

Zze
– Zze

2016-10-16 05:32:18 +00:00
Commented Oct 16, 2016 at 5:32 — Zze
– Zze, Commented Oct 16, 2016 at 5:32
There are many other ways to do it.

micronyks
– micronyks

2016-10-16 05:35:43 +00:00
Commented Oct 16, 2016 at 5:35 — micronyks
– micronyks, Commented Oct 16, 2016 at 5:35
Its working. maybe browser issue. try to run with chrome.

micronyks
– micronyks

2016-10-16 05:39:18 +00:00
Commented Oct 16, 2016 at 5:39 — micronyks
– micronyks, Commented Oct 16, 2016 at 5:39

Community · Accepted Answer · 2017-05-23 10:30:59Z

4

Any component with an unrecognized tagName like <crate></crate> is created as a HTMLUnknownElement and has empty values for all the style properties, if you want it to behave like a div then add display: block; to your stylesheet.

See Browsers' default CSS for HTML elements for additional resources on the default css for different browsers.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Oct 16, 2016 at 7:54

Mauricio Poppe

4,8861 gold badge25 silver badges30 bronze badges

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

1 Comment

Zze Over a year ago

I will check this out as soon as possible - thanks for the answer.

Collectives™ on Stack Overflow

Angular2 css :host applying but not visible in browser

EDIT

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related