Angular Component Schematic Flags You Didn't Know Exist
Here is a list of 8 really easy yet so powerful Angular Component Schematic Flags/Options unknown to many Angular Developers.
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!