angular style not applied on components (despite the use of host selectors)

Question

I have an issue with the styling of components in my angular projects. I can't get it to work basically. To explain my issue I created a new project using Angular CLI (CLI 6.0.8, angular 6.1.0). Right off the bate I create a new test component in which I declare the following things:

- - - - - - - - - - - - - 
COMPONENT TEMPLATE FILE:
- - - - - - - - - - - - - 

<div>with div</div>
without div

- - - - - - - - - - - - - 
COMPONENT STYLE FILE:
- - - - - - - - - - - - - 

:host
{
  background-color: blue;
}

(no changes to the typescript declaration file)

I include this component in the app template, and declare some styling for it in the app.css file too:

- - - - - - - - - - - - - 
APP TEMPLATE FILE:
- - - - - - - - - - - - - 

<app-test class='test'></app-test>

- - - - - - - - - - - - - 
APP STYLE FILE:
- - - - - - - - - - - - - 

.test
{
  background-color: red;
  width: 350px;
}

This is the result I get:

IMAGE : style does not apply correctly (background color applies to the free text only)

IMAGE : the width of the element is not updated and the element size is not shown as it usually is when using chrome

IMAGE : usually element sizes are highlighted in blue when shown

As shown in the images, the styling is not applied correctly, whether it is defined in the parent scope or in the component scope (using :host). Styles are updated but not shown. When I change the 'app-test' tag into a 'div' tag in the browser (using the debug tools > edit as HTML), it is displayed correctly:

IMAGE : changing the angular component tag into a div tag sorts the issue

I reckon it has something to do with the way angular displays the component since changing the tag to a DIV works. But I don't understand where this problem comes from. This issue appears on a newly created project using CLI, without configuration anything in the project config...

Can anyone help me?

Answer 1

About the width issue your facing in the test component, assuming you want the whole element to span to a width of 350px, you should define its display property to block:

:host {
  background: blue;
  display: block;
}

Custom elements does not have a default display property and your browser can't guess what your means are.

About applying the .test style on your component, the app-component styles are encapsulated using the _nghost-c0 and _ng-content-c0 attributes and therefor not being applied on test.component. If you want to apply the .test on other components you can either write the CSS RULE on the global styles.css file which is applied globally:

//styles.css
.test {
  background-color: red;
  width: 350px;
}

or use the viewEncapsulation property on your @component decorator like this:

//app.component.ts
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})

and then you can leave the CSS RULE on the app.component file

//app.component.css
.test {
  background-color: red;
  width: 350px;
}

but now the styles in that file are not encapsulated and will penetrate other components.

Answer 2

Its because custom components (custom html tags) are rendered as inline elements.

use

:host
{
  background-color: blue;
  display: block;
}

And it will work.

https://stackblitz.com/edit/angular-hknw2a?file=src/app/app.component.scss