Talently
Talently
Angular Material

Angular Material

The official UI component library for Angular applications

Angular Material is the official implementation of Material Design for Angular, developed and maintained by the Google team. It provides a set of accessible, well-tested UI components with full TypeScript support, following Material Design guidelines. It is the most used component library in the Angular ecosystem for building consistent and accessible interfaces.

AngularTypeScriptMaterial DesignAccessibility

Market demand

Angular Material has high demand in Angular enterprise projects, especially in organizations that already work with Angular and seek a component library officially supported by Google with accessibility and compatibility guarantees.

Official library of the Angular ecosystemHigh demand in Angular enterprise projectsDe facto standard in Angular interfaces

Technical requirements

Intermediate

Requires solid mastery of Angular with TypeScript, understanding of Angular's module system, and familiarity with RxJS for reactive components. Knowledge of Material Design as a design system facilitates making correct component usage decisions.

Use cases

Real Projects

Angular Material is used to develop:

  • Angular enterprise applications with consistent UI
  • Dashboards and admin panels in Angular
  • Complex forms with validation and visual feedback
  • Applications with strict accessibility requirements

Types of Company

Angular Material is adopted by:

  • Companies with an established Angular stack
  • Organizations that prioritize accessibility in their interfaces
  • Teams developing internal applications with Angular
  • Companies in the Google ecosystem that follow Material Design

Production Scenarios

Angular Material is widely used in production environments such as:

  • Interfaces with complex navigation using sidenav and toolbar
  • Reactive forms with Material Design visual feedback
  • Data tables with sorting and pagination using MatTable
  • Applications with consistent dialogs, snackbars, and tooltips

Scalability

Angular Material offers multiple mechanisms to scale applications:

  • Theming with custom color palettes through Sass
  • CDK as a base for building accessible custom components
  • Individual module imports to optimize the bundle
  • Support for multiple simultaneous themes with CSS classes

Advantages and Disadvantages

Advantages

Accessible components by default that follow WCAG guidelines.

Seamless integration with Angular Forms, CDK, and the Angular ecosystem.

Official maintenance by the Angular team at Google with long-term support.

Disadvantages

Recognizable Material Design aesthetic that requires customization to differentiate.

Coupling with Angular that limits its use outside the ecosystem.

More complex components like MatTable require extensive configuration for advanced cases.

Comparison

Advantages of Ant Design (ng-zorro)

  • Richer enterprise components especially for tables
  • Greater number of available components
  • More consistent API for complex use cases

Considerations

ng-zorro-antd is the Ant Design equivalent for Angular and has richer components for management applications. Angular Material is preferable when following Material Design or when the accessibility guarantees of the official Angular team are prioritized.

Basic questions

Angular Material is developed and maintained by the official Angular team, guaranteeing compatibility with each framework version, WCAG accessibility by default, and seamless integration with Angular Forms and CDK. It eliminates the uncertainty about compatibility that third-party libraries may have.
Angular Material is preferable when accessibility is a priority, the team wants to follow Material Design, long-term official support is valued, or the project doesn't need highly specialized components like charts or rich text editors that PrimeNG includes.
The CDK is the behavioral primitives library on which Angular Material is built. It provides tools for overlay, drag and drop, virtual scrolling, accessibility, and more without Material Design styles. It allows building accessible custom components with the same building blocks that Angular Material uses internally.
In Angular with modules, each component module is imported individually like MatButtonModule or MatTableModule in the corresponding NgModule. With the standalone architecture, they are imported directly in the component's imports array, importing only what is needed to optimize the bundle.
By defining custom color palettes with mat.define-palette() in Sass and configuring the theme with mat.define-light-theme() or mat.define-dark-theme(). The theme is applied with mat.all-component-themes() to propagate colors to all components consistently.
Angular Material components implement correct ARIA patterns, manage focus properly, support keyboard navigation, and have been audited to meet WCAG. Implementing this correctly from scratch requires specialized accessibility knowledge that Angular Material provides by default.
In Angular enterprise applications with accessibility requirements, complex forms, data tables, and advanced navigation where Material Design components are visually appropriate. Also in Google ecosystem organizations where Material Design is the corporate design system.
Through the CDK's BreakpointObserver which allows adapting application behavior based on screen size, combined with responsive Material components like Sidenav which can behave as a drawer or a fixed panel depending on the configured breakpoint.

Technical questions

By creating a MatTableDataSource with server data, binding MatSort and MatPaginator to the datasource, and listening to change events with merge(this.sort.sortChange, this.paginator.page) to build the server request with current parameters and update the datasource with the results.
MatDialog opens a modal dialog centered on the screen for actions requiring the user's full attention. MatBottomSheet opens a panel from the bottom of the screen for contextual menus or secondary actions. MatBottomSheet is more appropriate in mobile interfaces following Material Design guidelines.
Angular Material form components like MatFormField automatically show errors and states when integrated with FormControl. Error messages are configured with mat-error inside MatFormField which are displayed when the control is invalid and has been touched, without additional logic in the template.
Using MatAutocomplete with a FormControl whose valueChanges is listened to with debounceTime and switchMap to cancel previous requests. Server results are transformed into an Observable that feeds the MatAutocomplete, showing options as the user types.
It is the service that manages floating layers positioned over the main content. It is used directly to build custom components like tooltips, popovers, or dropdowns that Angular Material does not provide, leveraging the positioning, scroll, and focus logic that the CDK manages automatically.
By defining two themes in Sass, one light and one dark, and applying the dark theme within a CSS class or with the prefers-color-scheme media query. At runtime, the class is added or removed from the body element based on user preference, toggling between the two theme styles.
Using cdk-virtual-scroll-viewport with itemSize configured to the pixel size of each element and the *cdkVirtualFor directive instead of *ngFor. The CDK renders only the elements visible in the viewport, drastically improving performance with lists of hundreds or thousands of elements.
Using the cdkDropList directive on each list and cdkDrag on each draggable element. Lists are connected with the cdkDropListConnectedTo property referencing the other lists. The cdkDropListDropped event provides the source and destination list information to update the data correctly.

Advanced questions

Using CDK accessibility directives like FocusTrap to confine focus in a dialog, ListKeyManager for keyboard navigation in lists, and the appropriate ARIA attributes for the implemented component pattern. The CDK manages accessibility behavior while leaving styles completely free.
By creating a Sass theme file per brand with its custom palettes, generating a theme CSS per brand, and dynamically loading the active theme's CSS by changing the link stylesheet in the head. A theming service manages the active theme and can change it at runtime without reloading the application.
By following the same major version cycle that Angular Material uses with Angular, applying migration schematics with ng update @angular/material that automate breaking changes, verifying the changelog for each version, and running visual regression tests before deploying the update.
By importing only the necessary component modules in each Angular module, using Angular's lazy loading of modules to defer loading Material components not needed on initial load, and analyzing the bundle with source-map-explorer to identify which Material modules contribute most to the size.
Using Angular Material's testing harness which provides a high-level API for interacting with components in tests, independent of internal implementation. MatButtonHarness, MatInputHarness, and equivalents allow more robust tests that don't break with internal Angular Material changes.
When Angular Material doesn't have a specific needed component like an advanced chart or rich text editor. Angular Material is used as the main base and only the specific component from another library is added, accepting visual inconsistency and managing potential style conflicts between design systems.

Common interview mistakes

Importing a generic Angular Material module that includes all components generates an unnecessarily huge bundle. The correct practice is to import only the modules for the components used in each NgModule or standalone component.
Building behaviors like overlays, drag and drop, or virtual scrolling from scratch without knowing the CDK reflects a lack of knowledge of the Angular Material ecosystem. The CDK provides these tested and accessible primitives that should not be reimplemented.
Not understanding how Angular Material form components integrate with FormControl and when errors are displayed reflects limited experience with the framework. Correct integration eliminates manual logic for showing and hiding error messages.
Choosing Angular Material without evaluating PrimeNG or ng-zorro for complex enterprise cases reflects a lack of judgment. Knowledge of Angular Material's strengths and limitations compared to Angular ecosystem alternatives is expected.
Overriding Angular Material styles with more specific CSS instead of using the theming system with Sass mixins generates fragile code that breaks on updates. Not knowing mat.define-palette and mat.define-light-theme reflects a superficial understanding of the framework.
Writing tests for Angular Material components by directly accessing the DOM with querySelector instead of using the official harnesses generates fragile tests. Not knowing this testing API reflects inexperience writing robust tests in Angular projects with Angular Material.