In this article, I'm going to share with you 8 options or what's more commonly known as flags of the angular component schematic that are really very useful, yet unknown to many many angular developers. They really are a time saver.

1) Type Flag

To instruct the CLI to add a suffix to the generated components, use:

ng generate component component_name --type = page

OR

ng g c component_name --type = page

It's going to create a new component of the type page. I personally use this flag when I want to create angular routed components which are basically pages that we can land on; this helps distinguish between different types of components.

2) Export Flag

ng g c component_name --export = true | false

The --export flag is also available for directives and pipes.

Now, this component will be added to the exports array of the module where it was generated, so this component has now been exported for other modules to use as well. Whereas, if this component would’ve been generated without the export flag, it would just be a part of the declaration array of the parent module and not of the exports array. As a result, only the components within this particular module would be able to use this newly generated component.

3) Inline Style Flag

ng g c component_name --inlineStyle = true | false 

OR 

ng g c -s component_name

This generates a component with an inline styles array defined within the component in the component_name.component.ts file. So, basically, there's no external styles file generated.

4) Inline Template Flag

Next, let's check out the inline template flag which is quite similar to the inline-style flag.

ng g c component_name --inlineTemplate = true | false 

OR

ng g c -t component_name 

This generates a component with an inline template array defined within the component in the component_name.component.ts file, all your HTML code could go right there. So, basically, there's no external HTML file generated.

5) Prefix Flag

ng g c component_name --prefix = prefix 

OR

ng g c --p = prefix  component_name 

This basically allows us to name the component selector, not completely, but it just adds a prefix to the component selector. This helps differentiate and distinguish between different components, and the names actually tell us what the components do.

6) Skip Tests Flag

ng g c component_name --skipTests = true | false

So, as the name suggests, if you don't need (more like want) to write tests for your angular component, you don’t need to generate the component.spec.ts file (and keep it empty), just use the skipTests flag to easily skip generating this file altogether.

7) Style Flag

ng g c component_name --style =  css | scss | sass | less | styl

Now, however it may sound, the style flag is much different from the inline style flag, that we saw before. The style flag lets us explicitly define the type of style file we want for our component. As we know, the type of styles file by default in CSS. However, we can choose from a whole lot of styling options available using the style flag.

8) Display Block Flag

ng g c component_name --display-block

By default, the display of our components is in-line and if we want to change it to a block display, we just use the display block flag at the time of the creation of the component.

So, that’s it about these useful Angular Flags/Options. I hope the information provided in this article provides value to you. Thanks for reading. Happy Learning!