Angular 9.1 displayBlock CLI Component Generator Option by Example

Angular 9.1 displayBlock CLI Component Generator Option by Example

In this article, we'll learn about the new displayBlock option for the Angular 9.1 CLI component generator.

When you use the CLI to generate an Angular component, it will be displayed inline by default using the CSS inline property, as this is the default display for most DOM elements.

Displaying Angular Components with the display: block CSS style

More often than not, you'll need display your components with the display: block CSS style.

Instead of changing this manually for each new component you generate, you now have the option to set it automatically when using the CLI thanks to the displayBlock introduced in Angular 9.1.

Using Angular 9.1 CLI displayBlock by Example

This is how you use this option when generating a new Angular component:

ng generate component home --displayBlock

You can also make display:block by default by setting the[email protected]/angular:component.displayBlock key in your angular.json to true, or also run the following command in your terminal:

ng config [email protected]/angular:component.displayBlock true

✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also Gitter

✋ Want to master Angular 14? Read our angular tutorial and join our #DailyAngularChallenge where we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.

✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.

❤️ Like our page and subscribe to our feed for updates!

Find a list of emojis to copy and paste