Skip to content
Get packs

Guide · Open source

How to use Angular components: packages, setup and tips

Updated · written with AI from the project's own documentation and checked against our catalogue data

angular/components is the official set of UI building blocks for Angular, the web framework from Google. It includes Material Design components for common interface parts, plus the CDK, a toolkit for building your own components with shared interaction patterns. This guide explains which package does what, how to get started, and when this library is the right fit.

Angular Materialangular/components · ★ 25k · MIT

Quick start

  1. 1Check your project. Confirm you have an Angular project set up with the Angular CLI and Node.js installed.
  2. 2Read the Getting Started guide. Open material.angular.dev/guide/getting-started for the current install steps, since the README does not list an exact command.
  3. 3Pick your packages. Choose @angular/material for ready-made components, @angular/cdk for custom ones, or @angular/aria for headless directives.
  4. 4Add the packages. Install the packages the guide describes into your Angular project.
  5. 5Use a component. Find the component you need in the documentation and demos at material.angular.dev and follow its example.
  6. 6Add Maps or YouTube if needed. Read the package README for google-maps or youtube-player before integrating those external APIs.

What packages does angular/components include?

The Angular team maintains several npm packages. Each one covers a different job, so you only need to install the ones that match what you are building.

  • @angular/aria: headless, accessible directives that implement common WAI-ARIA patterns.
  • @angular/cdk: a library that helps you author custom UI components with common interaction patterns.
  • @angular/material: Material Design UI components for Angular applications.
  • @angular/google-maps: Angular components built on top of the Google Maps JavaScript API.
  • @angular/youtube-player: an Angular component built on top of the YouTube Player API.

What do you need before you start?

You need an Angular project, set up with the Angular CLI, and Node.js. The README does not state a required Node.js version, so check the Getting Started guide for current requirements.

The README does not give an exact install command. It links to the Getting Started guide, which is the place to find the current steps for adding Angular Material and the CDK to your project.

  • An Angular project created with the Angular CLI.
  • Node.js installed (version not specified in the README).
  • Basic familiarity with Angular. The project recommends learning the framework first if you are new to it.

How do you get started with Angular Material?

Follow the Getting Started Guide at material.angular.dev, which is linked from the README. It is the recommended route if you are building your first project with Angular Material.

If you want to read the source or explore the code itself, the README also shows you can clone the repository from GitHub. Cloning is for reading or contributing; it is not the same as adding the packages to your app.

  • Open the Getting Started guide at https://material.angular.dev/guide/getting-started.
  • Install the packages it describes into your Angular project.
  • Use the documentation and demos at material.angular.dev to find each component.
git clone https://github.com/angular/components

When should you use the CDK instead of ready-made components?

The CDK is for developers who want to build custom components. It provides common interaction logic so you do not have to write it from scratch. Use it when Material's ready-made components do not fit your design, but you still want consistent behaviour.

If you only need standard interface parts, start with @angular/material. If you need headless, accessible behaviour without the Material look, look at @angular/aria.

  • Choose @angular/material for ready-made Material Design components.
  • Choose @angular/cdk to build your own components with shared interaction patterns.
  • Choose @angular/aria for headless, accessible directives.

How do you add Google Maps or YouTube?

Two packages wrap third-party APIs as Angular components. @angular/google-maps is built on the Google Maps JavaScript API, and @angular/youtube-player is built on the YouTube Player API.

Each package has its own README in the repository with usage details. Read that before you integrate, because the required setup depends on the external API.

  • Google Maps: see the README at github.com/angular/components under src/google-maps.
  • YouTube: see the README at github.com/angular/components under src/youtube-player.

What should you check before relying on it?

The project states that it supports the two most recent versions of major browsers, including Chrome, Firefox, Safari and Edge. It also lists screen reader pairings it aims to work well with, such as NVDA and JAWS on Windows and VoiceOver on macOS and iOS.

Angular Material and the CDK follow the same support and release policy as the Angular framework. Check the Angular support policy page for supported versions before you commit to an upgrade plan.

  • Browsers: the two most recent versions of Chrome (including Android), Firefox, Safari (including iOS), and Edge.
  • Screen readers: NVDA and JAWS, VoiceOver, Android Accessibility Suite, and ChromeVox, depending on platform.
  • Versions: follow the Angular support policy and schedule.

What people use it for

  • Adding standard interface parts with accessible Material Design components to an Angular app.
  • Building a custom component, such as a bespoke widget, that reuses CDK interaction patterns.
  • Creating headless, accessible UI with @angular/aria while styling it your own way.
  • Embedding a Google Map or a YouTube video in an Angular page using the wrapper packages.

Frequently asked questions

Is angular/components free to use?

The repository is published under the MIT licence, as stated in the project information. Check the LICENSE file in the repository for the full terms before using it in a commercial product.

What do I need to install angular components?

You need an Angular project set up with the Angular CLI and Node.js. The README does not specify a Node.js version, so check the Getting Started guide for current requirements.

What is the difference between Angular Material and the CDK?

Angular Material provides ready-made Material Design UI components. The CDK is a toolkit that helps you author your own custom components with shared interaction patterns.

Can I use angular/components without Angular?

No. The packages are built specifically for Angular, so they are not suitable for projects that use other frameworks.

What are the alternatives to Angular Material?

Projects listed as comparable include PrimeNG, Angular Bootstrap (ng-bootstrap), Taiga UI, and Spartan UI. Compare them on visual style, accessibility and the components you need.

Which browsers and screen readers are supported?

The team supports the two most recent versions of Chrome, Firefox, Safari and Edge. It aims for good experiences with screen readers such as NVDA, JAWS, VoiceOver, TalkBack and ChromeVox.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use angular/components if you build with Angular and want accessible, maintained UI components, especially if Material Design suits your product. Pick something else if you do not use Angular, if you need a distinctive non-Material look without customization work, or if you are new to Angular and should learn the framework first.

Install options & downloads