Angular Components: Material Design UI library
Material Design components and utilities for Angular applications.
Learn more about Angular Components
Angular Components is a library of UI components and development tools built for Angular applications. It consists of multiple npm packages including @angular/material for Material Design components, @angular/cdk for component authoring utilities, and specialized packages for Google Maps and YouTube Player integration. The library emphasizes accessibility, internationalization, and testability across components. Components are designed to work across recent versions of major browsers and support multiple screen readers on different platforms.
Component Development Kit
The CDK provides low-level primitives for building custom components without Material Design styling. Includes behavior patterns for accessibility, overlays, and interactions that work independently from any UI framework.
Cross-Platform Accessibility
Built-in screen reader support tested across Windows, macOS, iOS, Android, and Chrome OS with multiple assistive technologies. Targets WCAG compliance with internationalization features included in all components.
Modular Package Architecture
Each UI component is published as an independent package that can be installed separately. Import only the components needed, reducing bundle size and enabling gradual adoption without committing to the entire library.
import { Component } from '@angular/core';
import { GoogleMap } from '@angular/google-maps';
@Component({
selector: 'app-map',
template: '<google-map height="400px" width="100%" [center]="center" [zoom]="zoom"></google-map>',
standalone: true,
imports: [GoogleMap]
})
export class MapComponent {
center = { lat: 37.7749, lng: -122.4194 };
zoom = 12;
}Performance improvements for column resizing and accessibility fixes for chips and menus
- –column-resize: add debounce to column header hover to prevent excessive handler rendering
Performance improvements for column resizing and accessibility fixes for menus and toolbars
- –column-resize: add debounce to column header hover to prevent excessive handler rendering
Bug fixes for Material components including sidenav focus trapping and timepicker styling
- –sidenav: incorrectly trapping focus in some cases
- –timepicker: make it easier to style timepicker panel
Top in Frontend
Related Repositories
Discover similar tools and frameworks used by developers
Slick
Responsive jQuery plugin for touch-enabled content carousels.
TanStack Virtual
Headless virtualization library for rendering large lists efficiently.
OpenCut
Timeline-based browser video editor with multi-track support.
HTML5 QR Code
Camera and file-based QR/barcode scanning library.
Responsive HTML Email Template
Cross-client HTML email starter with inline CSS support.
Related Reading
Guides and comparisons from the Greptile content library
Choosing the Right Code Review Tool: Better Alternatives to Graphite AI
A breakdown of the best alternatives to Graphite for code reviews. Compare AI tools like Trag, open-source solutions like Gerrit, and database-focused platforms like Visual Expert.
10 Powerful Code Quality Tools That Catch Bugs Before Deployment
We tested 10 code quality tools that catch bugs before production. Detailed comparison with real-world examples, pricing, and ROI analysis for dev teams.
Greptile Ranks #1 on Martian's AI Code Review Benchmark
Greptile ranks #1 on Martian's independent online AI code review benchmark, leading all evaluated tools in F1 score and precision with near-leading recall.
What is agentic coding? Benefits, risks, and best tools to consider
What engineering leaders need to know about agentic coding: how it differs from AI coding and vibe coding, how it works, the benefits and risks, and the tools worth evaluating.