[FIXED] Angular component default style css display block


I am sick of all my angular elements being 0x0 pixels, because they have names like app-card, app-accordion, which the browser does not recognise as HTML5 compliant elements and as thus, will not give any default styles to.

This is means that inspecting it in Chrome, I fail to see the container dimensions and when the DOM is really deep, it is hard to understand which element encompasses which area on the screen, etc.

It feels logical to me that all angular elements should be block displayed by default, because for the majority, it makes sense.

As an example, consider these elements

bbs-accordion-header //(width 0px, height 0px)


bbs-accordion-header-regular //(width 1920px, height 153px)

enter image description here

enter image description here

enter image description here

So bbs-accordion-header does not have any dimensions, even though it’s children do have them.

I solve this, by manually adding one line to each elements .scss file

:host { display: block; }

But it is very tedious to add this manually every time. Does anyone know of a better solution?


My pull-request has been merged.

With the upcoming release of Angular CLI v9.1.0 a new option is going to be available:


Docs: https://next.angular.io/cli/generate#component

For the impatient: It’s available right now in v9.1.0-next.0

When using the CLI:

ng generate component dashboard --displayBlock=true

Settting a default value in angular.json:

"projectType": "application",
"schematics": {
    "@schematics/angular:component": {
      "displayBlock": true

From now on any generated component, be it with the css inlined or not, will contain the css:

:host { display: block; }

More detailed information is available here: https://blog.rryter.ch/2020/01/19/angular-cli-generating-block-components-by-default/

Answered By – rryter

Answer Checked By – Robin (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published