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.
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
- choose “Generate a component”,
- type the name you want for your component (for example
- 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
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
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.jsonand add them to the component types choice list,
- it will add the new
--typeoption 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
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)