Angular CLI: 3 Options You Didn't Know About the Component Schematic

Amadou Sall -

In this article, I will share with you three options/flags of the Component schematic that are very useful, yet unknown to many Angular developers.

The --export flag

When true, the declaring NgModule exports this component.

By default, when you use the ng generate component command, the generated component is only added to the declarations array of the NgModule in which it belongs. The component is therefore only available for components that are declared in the same NgModule.

You can use the --export flag to tell the Angular CLI to also automatically add the component to the exports array of the declaring NgModule—let’s say TeamModule. This will make it available to other NgModules that import TeamModule.

ng generate component team-list --export

With the above command, our TeamListComponent is now exported by the TeamModule as shown in the following code sample:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { TeamListComponent } from "./team-list/team-list.component";

@NgModule({
  declarations: [TeamListComponent],
  imports: [CommonModule],
  exports: [TeamListComponent], // the component is exported
})
export class TeamModule {}

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

The --display-block flag

Specifies if the style will contain :host { display: block; }.

Angular components are inline by default. So, if you don't do anything, the browser will treat your Angular components as if their CSS display property was set to inline. This isn't always what you want. Some may even argue that you never want this behavior, but instead want your components to be block elements by default.

The Angular team has decided against changing this default behavior. Fortunately, the Angular CLI can now save you some time by adding the CSS needed to set your component's CSS display property to block thanks to the --display-block flag.

ng generate component team-card --display-block

With the command above, the team-card.component.css file will contain the following content:

:host {
  display: block;
}

The --type option

Adds a developer-defined type to the filename, in the format "name.type.ts".

When you generate a new Angular component, the CLI will append Component to the class name and .component.ts to the filename as recommended by the Angular style guide.

But, sometimes you may want to differentiate between your components. I personally tend to use the suffix page for my routed Angular components aka "pages". Thanks to the --type option, we can instruct the Angular CLI to generate components with our desired suffix:

ng generate component team-details --type=page

The above command will generate a file named team-details.page.ts with the following content:

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-team-details",
  templateUrl: "./team-details.page.html",
  styleUrls: ["./team-details.page.css"],
})
export class TeamDetailsPage implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

Conclusion

In this article, you learned how to boost your productivity by using three Angular CLI options/flags when generating Angular components:

  • the --export flag, to create an exported Angular component;
  • the --display-block flag, to make your Angular component a block element;
  • the --type option, to set a custom suffix to help distinguish your Angular components.