Angular component default style css display block

Question

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)

contains

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

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?

Answer 1

My pull-request has been merged .

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

--displayBlock=true|false

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/