Zze Zze -4 years ago 182
CSS Question

Angular2 css :host applying but not visible in browser

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


Firefox

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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download