Angular component types, and Angular 9 new feature

Cyrille Tuzi

Follow

Feb 7 · 4 min read

In today’s front-end development, it’s all about components. And so is Angular. But there are very different kinds of components.

This post will:

• explain the different Angular components types,
• show how to create them easily with Angular Schematics extension for Visual Studio Code,
• show how to take advantage of the new Angular 9 components options.

The post assumes you’re already familiar with Angular basics.

A French version of this post is available here.

Visual Studio Code extension

• In VS Code, install the Angular Schematics extension,
• then do a right click on the directory of your Angular project, where you want to generate your component (for example src/app),
• choose “Generate a component”,
• type the name you want for your component (for example hello),
• 3 special component types will be suggested to you.

Page: routed components

In an application, the first component type you’ll use is a page. Otherwise your app is just empty.

Pages have 2 characteristics :

• they are associated to a route,
• most of the time, they rely on an asynchronous operation (like a HTTP request) to get their data.

Recommended (but not required) option: no selector. Why? Because pages are supposed to be used via the router, not called via HTML tags. Otherwise it could cause issues as your pages often rely on routing data (like the ActivatedRoute service to get the URL params).

ng g component test --skip-selector

With Ivy, the new Angular 9 engine, modals and dialogs should be generated as pages too (previously they were another special component type: entry components).

Pure: presentation components

In a good architecture, presentation should not be done directly in pages but in distinct presentation components, also known as dumb or pure components.

Their main characteristic : a pure component relies only on its @Input (ie. component attributes) for getting its data.

It allows a recommended performance option: you can switch the Angular change detection to OnPush, which means the component will only be checked when its @Input change (so not every time there is an asynchronous operation in the app).

ng g component test --change-detection OnPush

Note you can manage some pages to be pure too with the async pipe, but it requires a quite advanced knowledge of Angular and RxJS.

Exported: component lib

If you’re doing a reusable UI component, you need to export it. It’s the case when you are doing a component lib via ng g library.

It’s because by default Angular components are scoped to the module where they are declared. So as a lib component will be reused in another module, you need to widen the scope.

Also, a reusable component should be pure. Otherwise it would mean it’s not generic (for example, if you rely on a HTTP request to get the data, the API URL won’t be the same in all projects).

ng g component test --exported --change-detection OnPush

Angular 9 component types

Angular CLI 9 introduces a new type option for component generation:

ng g component test --type page

It will change the component suffix by generating the TestPage class in test.page.ts file (instead of the TestComponent class in test.component.ts file).

You need to allow new suffixes in your root tslint.json config. For example:

"component-class-suffix": [true, "Component", "Page", "Modal"]

Tada! Now combine this with the Angular Schematics extension for Visual Studio Code and it becomes super easy:

• the extension will detect your suffixes in tslint.json and add them to the component types choice list,
• it will add the new --type option for you in the CLI command,
• and it will pre-select the recommended component type!

Bonus: Angular Element

This one is not suggested by the extension as it’s still experimental, but you can now do Angular Elements. They are components developed with the powerful Angular syntax and tooling, but compiled to native Web Components, so they are reusable in every project, no matter the framework. It’s similar to Stencil or Polymer/LitElement.

As the final code will be native, they need to use the native ShadowDom encapsulation instead of the Angular one. Note ShadowDom doesn’t work on Internet Explorer / Edge Legacy.

ng g component test --view-encapsulation ShadowDom

Support

Be sure to check the README of the extension (about requirements and else).

If you have a problem with the extension, open an issue on Github (commenting here is not the right place to do it).

By the same author

• @ngx-pwa/local-storage: Angular library for local storage
• typescript-strictly-typed: strict config for TypeScript and ESLint/TSLint
• Other popular Angular posts on Medium
• Follow me on Twitter
• Angular onsite trainings (based in Paris, so the website is in French, but my English bio is here and I’m open to travel)