Angular Material

Angular 官方御用 Material Design UI 组件库、Material Design 在 Angular 生态唯一权威实现——由 Google Angular 团队（与 Angular 框架同源、同一份发版节奏）于 2014 年 9 月 在 GitHub 创建并开源（仓库 angular/material，2019 年合并入 angular/components monorepo），是 Angular 框架在 Material Design 上的官方背书。Angular Material 与 Angular 框架版本号严格对齐——v1 → v17 → v18 → v19 → v20、每年 5 月 / 11 月跟随 Angular Major 发版，截至 2026 年 5 月最新稳定版为 v20.x。Angular Material 完全基于 Angular 17+ Standalone Components（v15 后 deprecate NgModule、v19+ 实质 standalone-only 模式）+ TypeScript 5+ + Sass / SCSS + Angular Animations（provideAnimationsAsync()）+ Material Design 3（v19 推出 mat.theme() 新 API、v20 全面拥抱 M3）。核心生态矩阵：@angular/material（60+ Material 组件、覆盖 Form Controls / Navigation / Layout / Buttons & Indicators / Popups & Modals / Data Table 等 7 大类）/ @angular/cdk（Component Dev Kit、底层行为原语库、a11y / overlay / portal / breakpoint / drag-drop / scrolling / clipboard / text-field / stepper / table / tree / virtual-scroll 等 15+ 模块、Angular 生态 headless 行为底座）/ @angular/material-moment-adapter + @angular/material-luxon-adapter + @angular/material-date-fns-adapter（Datepicker 日期库适配器）/ @angular/cdk/testing（Component Test Harnesses——Angular 团队官方推动的稳定测试 API 模式、MatButtonHarness / MatInputHarness 等所有组件配套 Harness、Karma + Selenium WebDriver 双环境）。核心特性：mat.theme() 新主题 API（v19 引入、v20 默认、Material 3 design tokens 实现、单 mixin 完成 color + typography + density 三大维度配置、输出 --mat-sys-* CSS Variables）/ 12 个 prebuilt 调色板（mat.$red-palette / mat.$blue-palette / mat.$violet-palette 等、M3 现代色板基于 HCT 色彩空间）/ light-dark CSS 函数 + color-scheme 一行启用深浅模式（无需 JS 干预、用户系统偏好自动响应）/ ng add @angular/material schematic 一键集成（自动配置 theme / Roboto 字体 / Material Icons / Animations / provideAnimationsAsync()）/ ng generate @angular/material:nav | table | dashboard | address-form | tree 5 大模板（一行命令生成可用的 sidenav / data-table / dashboard 等完整模块）/ Standalone Component imports（import { MatButton } from '@angular/material/button'、按组件按需引入、Tree Shaking 友好）/ mat.theme-overrides() + mat.{component}-overrides() 细粒度 token 自定义（system token + component token 双层、不需要修改内部选择器）/ @angular/cdk 是 Angular 生态行为底座——React 端 Radix / Headless UI 各自分散、Angular 端 CDK 官方一站式 + 与 Angular Material 同团队（OverlayModule / PortalModule / A11yModule / LayoutModule / DragDropModule / ScrollingModule）/ Tonal Button + Filled Card 新变体（v20 新增、贯彻 M3 视觉层级）/ closePredicate Dialog 细粒度关闭控制（v20）/ 完整 TypeScript 严格类型（每个组件 typed input / output / generic、Angular Signals 友好）/ 完整 RTL（双向）支持（@angular/cdk/bidi、Material 组件天然 RTL）/ WCAG 4.5:1 Strong Focus Indicators（mat.strong-focus-indicators() 一行启用）/ @angular/cdk/testing Component Harnesses（Karma 单元测试 + Selenium e2e 测试、Page Object 模式官方实现、Angular 团队强烈推荐避免脆弱选择器）。典型用户群：Google 自家所有 Angular 产品（Gmail / Google Cloud Console / Google Ads / Firebase Console / Google Analytics / YouTube Studio / Google Search Console 几乎全部 Angular UI 都在 Material 之上）/ 企业级 Angular 应用（Microsoft Forms / Forbes / Upwork / Deutsche Bank / Samsung / Capital One 等大型 SaaS）/ Angular Workshop / Angular Conferences 演示项目几乎全是 Angular Material。截至 2026 年 5 月的 v20.x 处于「Material 3 完全成熟期」，v19 mat.theme() API 大变 + v20 tonal button / filled card / closePredicate / drag-drop resetToBoundary() 等 M3 完善，@angular/cdk 已成为 Angular 生态最重要的底层库之一——这是 Angular + Material Design 项目里唯一官方背书、与框架版本对齐、与 CDK 联动最紧、企业可放心选用 12 年的 UI 库。

评价

优点

• Angular 官方唯一背书：Angular Material 由 Google Angular 团队亲自维护、与 Angular 框架同仓库（angular/components monorepo）、同发版节奏（每年 5 月 / 11 月跟随 Angular major）—— Angular 生态没有第二个 Material Design 实现具备同等权威性，企业可放心选用 12 年
• 与 Angular 版本号严格对齐：v17 / v18 / v19 / v20 / v21（计划 2026 年 11 月）跟随 Angular Major、版本可预测、不会脱节——不像某些社区库版本落后 Angular 框架一两个 major
• Material Design 3 完整实现：v19 推出 mat.theme() 新 API、v20 拥抱 M3——HCT 色彩空间、新色板、tonal button、filled card、token 命名重构全部对齐 Google M3 spec
• @angular/cdk 一站式行为底座：CDK 是 Angular 生态的「Radix UI + Headless UI + Floating UI」三合一—— OverlayModule（Popper 定位）+ PortalModule（Teleport）+ A11yModule（Focus / List Key Manager）+ LayoutModule（BreakpointObserver / MediaMatcher）+ DragDropModule（拖拽）+ ScrollingModule（虚拟滚动）+ TextFieldModule（输入框增强）+ StepperModule（步骤器）+ TableModule（CdkTable）+ TreeModule（CdkTree）+ ClipboardModule + BidiModule + ObserversModule + PlatformModule——15+ 模块覆盖几乎所有底层行为需求、官方维护质量极高
• ng add @angular/material schematic 一键集成：单条命令完成所有配置——安装包 + 修改 angular.json 注入 prebuilt theme + 注入 Roboto 字体 + 注入 Material Icons + 配置 provideAnimationsAsync() + 修改全局样式——零手动配置、新人 30 秒上手
• mat.theme() 极简新主题 API：v19 引入、一个 mixin 完成所有定制——color + typography + density 三参数、输出 --mat-sys-* CSS Variables、配合 light-dark() CSS 函数 + color-scheme 一行启用深浅模式
• Standalone Component 默认：Angular 17+ standalone API、Material 全组件支持——import { MatButton } from '@angular/material/button' + imports: [MatButton]——按组件按需引入、Tree Shaking 友好、不再需要 NgModule 包装
• 完整 TypeScript 严格类型：每个组件 typed input / output / generic、Angular Signals 友好（v17+ input() / output() signal API、v19+ resource API）—— Angular Material 与 Signals 配合非常顺畅
• Component Test Harnesses 官方测试模式：@angular/cdk/testing 提供 MatButtonHarness / MatInputHarness / MatSelectHarness / MatDialogHarness 等所有组件的稳定测试 API——Page Object 模式官方实现、Karma 单元测试 + Selenium e2e 测试双环境、避免脆弱选择器
• ng generate @angular/material:nav | table | dashboard 5 大模板：一行命令生成可用模块——Sidenav 响应式导航 + DataTable 排序分页 + Dashboard Grid 仪表板 + AddressForm 地址表单 + Tree 树视图——5 大企业级模板覆盖 80% 起手场景
• @angular/cdk/testing 的 Harness 模式：是整个前端测试领域的官方标准实现——比 Testing Library 的 getByRole 更接近组件语义、不依赖 DOM 内部结构、组件升级测试不破
• WCAG 强焦点指示器一行启用：@include mat.strong-focus-indicators()——满足 WCAG 4.5:1 对比度要求、可配置 border-color / border-style / border-width / border-radius、a11y 开箱即用
• 完整 RTL 双向支持：@angular/cdk/bidi、dir="rtl" 一行启用、所有 Material 组件天然适配——国际化项目不需要二次适配
• 企业级日期选择器：MatDatepicker 配合三大日期库适配器（Moment / Luxon / date-fns）——Angular 生态唯一企业级 DatePicker、覆盖 i18n / 自定义 format / 范围选择 / 日历筛选
• 完整 SSR 支持：Angular Universal / @nguniversal/express-engine、Angular Material 全组件天然 SSR 兼容、color-scheme: light dark 避免 FOUC 反闪烁
• 海外英文文档质量极高：material.angular.dev —— 每个组件都有 Examples / API / Styling / Testing 四个 Tab、Stackblitz 在线编辑、Migration Guide 详尽、与 Angular 主站文档风格一致
• mat.theme-overrides() + mat.{component}-overrides() 双层 token 自定义：system token（如 primary-container）改全局调色、component token（如 mat.card-overrides()）改单个组件 token——不需要修改内部 CSS 选择器、向后兼容、token 拼写错误编译期报错
• 持续迭代：v17 standalone / v18 M3 实验性 / v19 mat.theme() 正式 / v20 tonal button / v21（2026/11）规划中——每个 major 都有清晰路线图、不像某些社区库无声死亡

缺点

• 国内 Angular 市场份额远不如 Vue / React：国内 Angular 项目本来就少（90% 中后台是 Vue + Ant Design Vue / Element Plus，React 用 Ant Design）——Angular Material 国内人才储备稀缺、招聘市场窄、培训资源少
• Angular 学习曲线本身陡：Angular 17+ standalone 简化了一部分但 DI / Decorators / Signals / RxJS / Zoneless / Change Detection 概念多——新人 1-2 周才能上手 Angular 本身、再加 Material 又是一周
• Bundle 体积偏大：完整 @angular/material 引入后 bundle ~300-400KB（已 gzip），比 MUI / Mantine 偏重——必须 Tree Shaking + standalone import 按需引入
• @angular/animations 依赖：约 15 个 Material 组件依赖 @angular/animations（默认 lazy-load via provideAnimationsAsync()），如果应用入口直接用任一这些组件、@angular/animations 会被立刻拉入主 bundle——需要 lazy route / @defer 才能保持代码分割
• Material 2 → Material 3 迁移成本：v19 引入 mat.theme() 新 API、v20 全面 M3——老项目从 mat.define-light-theme() / mat.define-palette() 迁移到 mat.theme() 需重写 SCSS 主题文件、token 命名从 --mdc-* 改为 --mat-* 是 v20 破坏性变更
• Material 视觉风格强绑定：严格遵循 Material 3 spec、视觉不灵活——如果需要 Apple 风格 / 极简风格 / 营销页风格、应该选 NG-ZORRO / PrimeNG 或自己写
• Datepicker 必须配适配器：MatDatepicker 不内置日期库、必须安装 @angular/material-moment-adapter / @angular/material-luxon-adapter / @angular/material-date-fns-adapter 之一——新人最高频踩坑（默认看不到日历）
• 没有官方 DataGrid Pro：MatTable 提供基础 sort + pagination + selection、没有列固定 / 树形 / Excel 导出 / row grouping 等企业级特性——需要 AG Grid Angular / PrimeNG Table 等第三方
• vs NG-ZORRO：NG-ZORRO 国内 Angular 中后台主流、Ant Design 视觉、组件库更全（含 NZ Pro）；Angular Material 官方背书 + Material 设计 + CDK 行为底座 —— 国内中后台选 NG-ZORRO、海外或 Material 风格选 Angular Material
• vs PrimeNG：PrimeNG 300+ 组件、Premium 模板付费、社区活跃；Angular Material 60+ 组件 + CDK 行为底座、官方背书 —— PrimeNG 给「更多组件」、Angular Material 给「官方质量」
• vs MUI（React 阵营）：MUI 海外 React 默认、生态更完整（MUI X 数据网格）；Angular Material Angular 阵营官方 —— 跨阵营对比、各自生态主力
• mat.theme() 与 Tailwind 优先级：Angular Material CSS 优先级与 Tailwind 容易冲突、需要 CSS @layer 或 !important 解决——不像 MUI v7+ 内置 CSS Layers 那么干净
• Form 与 Reactive Forms 强绑定：MatFormField 必须配合 FormControl / FormGroup 或 [(ngModel)]、不适合用 react-hook-form 等跨阵营方案（Angular 原生表单 API 即官方答案）
• provideAnimationsAsync() vs provideAnimations() 选择：默认推荐 async（lazy load @angular/animations）但很多组件需要 animations 立即可用——新人容易选错、出现「点击 Material 弹出层但没动画」的诡异现象
• Material Icons 默认依赖 Google Fonts：<mat-icon> 默认从 Google Fonts CDN 加载图标字体、国内访问不稳定——需要自部署或换 SVG icon registry
• 学习曲线：mat.theme() 简单、mat.{component}-overrides() 中等、@angular/cdk/overlay 自定义浮层较陡、整体新人 3-5 天上手基础、1-2 周熟练 CDK

文档地址

Angular Material 官网 | 入门指南 | 主题指南 | Theming Your Components | Material 2 兼容指南 | Schematics 指南 | 组件总览 | CDK 总览 | Component Harnesses | Custom Form Field Control | Bidirectionality | Angular 框架主站 | Material Design 3 规范

GitHub 地址

angular/components（主仓库、24k+ Star、与 Angular Material 同仓） | angular/angular（Angular 框架主仓） | angular/material.angular.dev（文档站源码）

学习路径

• 入门：Angular 17+ standalone 前置 / ng add @angular/material schematic 一键集成 / 选择 prebuilt theme（azure-blue / rose-red / cyan-orange / magenta-violet）/ 第一个 MatButton + MatFormField + MatInput / Standalone Component 按需 import / provideAnimationsAsync() 动画配置 / Roboto 字体 + Material Icons 字体 / TypeScript 基础（Signals 友好）/ ng serve 启动验证 / 深浅模式一行启用（color-scheme: light dark）
• 指南：核心：Angular Material 60+ 组件全景（Form Controls / Navigation / Layout / Buttons & Indicators / Popups & Modals / Data Table / Tabs / Misc）/ MatFormField + MatInput 完整 API（appearance / floatLabel / hint / error / 前缀后缀）/ MatSelect + MatAutocomplete / MatDatepicker 完整方案（Moment / Luxon / date-fns 适配器、范围选择、自定义 format）/ MatTable + MatPaginator + MatSort 完整数据表（DataSource / Virtual Scroll 集成）/ MatDialog + MatBottomSheet + MatSnackBar 三大弹层 / MatTabs + MatStepper + MatExpansionPanel / @angular/cdk 行为底座完整方案（Overlay / Portal / A11y / LayoutModule BreakpointObserver / DragDrop / Scrolling 虚拟滚动）/ mat.theme() 完整主题 API（color palette / typography map / density）/ Material 3 design tokens + --mat-sys-* CSS Variables 全集 / 深浅模式 + light-dark() CSS 函数 / mat.theme-overrides() + mat.{component}-overrides() 双层 token 自定义 / Strong Focus Indicators a11y / ng generate @angular/material:nav | table | dashboard 5 大模板 / Standalone Component import 最佳实践 / provideAnimationsAsync() vs provideAnimations() / @angular/cdk/testing Component Harnesses 测试模式 / Angular Router 集成（MatNavList + routerLink、MatTabNav + Router Outlet）/ 常见踩坑（M2 → M3 主题迁移 / --mdc-* → --mat-* token 重命名 / Datepicker 适配器忘装 / Material Icons CDN 阻塞 / Tailwind 优先级冲突 / SSR style flicker）
• 参考：API 速查：Angular Material 60+ 组件分类清单（Form Controls 14 / Navigation 4 / Layout 6 / Buttons & Indicators 8 / Popups & Modals 7 / Data Table 4 / Tabs / Misc）/ @angular/cdk 15+ 子模块速查（A11y / Bidi / Clipboard / Drag-Drop / Layout / Observers / Overlay / Platform / Portal / Scrolling / Stepper / Table / Testing / Text-field / Tree） / mat.theme() 完整选项树 / --mat-sys-* CSS Variables 系统 token 全表 / mat.{component}-overrides() Mixin 速查 / ng add / ng generate schematics 全表 / 12 个 prebuilt color palette / TypeScript 核心类型（ThemePalette / MatFormFieldAppearance / MatPaginatorIntl / MatSortable）/ Component Harness 速查（MatButtonHarness / MatInputHarness / MatSelectHarness / MatDialogHarness 等）