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
✋ Want to master Angular 14? Read our angular tutorial and join our
#DailyAngularChallengewhere 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.
Find a list of emojis to copy and paste
Hands-on Angular eBook
Subscribe to our Angular newsletter and get our hands-on Angular book for free!