How to get started with Angular Material

Angular Material is a UI component library for Angular developers. It offers a wide range of pre-built, customizable, and accessible UI components to enhance the look and feel of the Angular application. It is built on the principles of Google’s Material Design that provides a modern and consistent UI experience.

Key takeaways:

  • Angular Material is an official UI component library for Angular, enhancing user experience with reusable, accessible components based on Material Design.

  • It offers pre-built components, responsive layouts, customization options, and design consistency across applications.

  • Make sure that Node.js and npm are installed, along with Angular CLI for project management.

  • Use ng add @angular/material to install the library along with necessary themes and styles.

  • Import required Angular Material modules in app.module.ts to utilize various components.

  • Check that global styles for Angular Material are included in angular.json.

  • Create custom themes in styles.css to define primary, accent, and warn colors.

What is Angular Material?

Angular Material is an official component library developed and maintained by the Angular team at Google. It offers a collection of well-tested, reusable, and accessible UI components that are built on Material Design guidelines. These components not only enhance the aesthetic appeal of the applications but also improve user experience and productivity in development.

Why choose Angular Material?

Here are some causes to choose Angular Material:

  • Pre-built components: Angular Material provides ready-to-use components such as buttons, cards, forms, dialogs, and more.

  • Responsive layout: It follows Material Design guidelines, making it easy to create mobile-friendly applications.

  • Customization: It offers large theming options that allow the customization of components according to the design requirements.

  • Consistent design: With a unified approach, we can maintain design consistency across the application.

Prerequisites

Before getting started, make sure you have the following installed:

  • Node.js and npm: Angular CLI requires Node.js and npm. Verify the installation by running the node -v and npm -v commands on the terminal.

  • Angular CLI: A command-line tool that streamlines the creation and management of Angular projects. Install the Angular CLI and verify the installation by running the ng version command.

Installing Angular Material

Before integrating Angular Material, navigate to the Angular application. If you don’t have any, create an Angular application using the Angular CLI. Run the following command to add Angular Material to the Angular application:

ng add @angular/material

This command will do the following:

  • Install Angular Material, Angular CDK, and Angular Animations.

  • Include the default global theme and Material icons.

  • Import some base styles required for Material Design.

Setting up Angular Material

After installation, we need to configure the theme, typography, and animations. Angular Material provides several built-in themes, but we can also create custom themes.

Importing Angular Material modules

To use Angular Material components, we need to import their respective modules. For example, to use buttons and form fields, we’ll add the following to the app.module.ts:

import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
@NgModule({
  // ...
  imports: [
    MatButtonModule,
    MatFormFieldModule,
    // other modules...
  ],
  // ...
})
export class AppModule { }
Importing Angular Material in the app.module.ts file

Verify Angular Material styles

Angular Material requires some global styles for layout and animations. These styles are automatically added when we run the ng add @angular/material command, but make sure to check if the angular.json file includes the following theme styles:

"styles": [
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.css"
],
"scripts": []
Adding Angular Material styles in the package.json file

Using Angular Material components

Now, we can start using Angular Material components in the templates.

Buttons

We can use buttons as follows:

<button mat-button>Simple Button</button>
<button mat-raised-button>Raised Button</button>
Using Angualr Material for buttons

Cards

Here’s another example using cards:

<mat-card>
  <mat-card-header>
    <mat-card-title>Card Title</mat-card-title>
    <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    Card content goes here.
  </mat-card-content>
</mat-card>
Using Angualr Material for cards

Form controls

Angular Material provides many form controls, i.e., inputs, checkboxes, radio buttons, and more.

<mat-form-field>
  <input matInput placeholder="Enter your name">
</mat-form-field>
Using Angualr Material for form controls

Custom theming with Angular Material

Angular Material supports custom theming that allows us to create color palettes. We can define a custom theme in the styles.css file like this:

@import "@angular/material/theming";
@include mat-core();
$custom-theme: mat-light-theme(
  (
    primary: mat-palette($mat-indigo),
    accent: mat-palette($mat-pink),
  )
);
@include angular-material-theme($custom-theme);
Adding custom themes to the styles.scss file

This approach defines primary, accent, and warn colors for the application.

Responsive design in Angular Material

Angular Material is built with mobile-first in mind. It uses the Flex Layout module to handle responsive design effectively. Here’s an example of using Angular’s grid system:

<div fxLayout="row" fxLayoutAlign="space-around center">
  <div fxFlex="25">Item 1</div>
  <div fxFlex="25">Item 2</div>
  <div fxFlex="25">Item 3</div>
</div>
Using Flax Layout to handle responsive design

This creates a responsive row layout that adjusts based on the screen size.

Application demo

Let’s run a demo application of Angular Material below:

AAABAAMAMDAAAAEAIACoJQAANgAAACAgAAABACAAqBAAAN4lAAAQEAAAAQAgAGgEAACGNgAAKAAAADAAAABgAAAAAQAgAAAAAAAAJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABJCPAnSgrzskoK87JJCPAnAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUw7yEkUI9IhGCfT+SAr2/0wJ9f9NC/L/UAjzmVMO8hIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMwAzwFLDO9jRAjy6UYJ9P5ICvb/TAn1/0wJ9f9RCPT/UQj0/1QI8u5aBvB3jgv3BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYhDuRkUJ79JGCfT+Rgn0/kYJ9P5ICvb/TAn1/0wJ9f9RCPT/UQj0/1YI8v9cB+7/Ywfq2GIQ7kYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEkI8CdKCvOyTQvy/00L8v9GCfT+Rgn0/kgK9v9ICvb/TAn1/1EI9P9RCPT/Vgjy/1kH8P9hB+3/Zgfp/20I5v9zCOK7ew/kKgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABTDvISUw7tkVEP7/lNC/L/TQvy/00L8v9MCfX/TAn1/0gK9v9MCfX/TAn1/1EI9P9RCPT/Vgjy/1wH7v9mB+n/aQnp/3EI4/92COD/ewje/4UI15meD9UWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEsM72NaEe7vVhDx/1YQ8f9WEPH/VhDx/1AN9f9QDfX/UA31/1AN9f9QDfX/UQj0/1EI9P9WCPL/WQfw/2EH7f9mB+n/bQjm/3EI4/97CN7/ggjZ/4wK0/+UC87trhvYWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFoR7oVcE/H/XBPx/1wT8f9WEPH/VhDx/1YQ9v9WEPb/VhD2/1AN9f9QDfX/UQj0/1EI9P9WCPL/XAfu/2EH7f9pCen/cQjj/3YI4P97CN7/ggjZ/4wK0/+WC8z/nwvHgQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH8Z8BlfFPD5XBPx/1wT8f9cE/H/XBP2/1wT9v9WEPb/VhD2/1YQ9v9WEPb/Vgjy/1YI8v9ZB/D/YQft/2YH6f9tCOb/cQjj/3sI3v+CCNn/jArT/5YLzP+dDMj8ng/VFgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABiF/GxZBPx/2QT8f9iFfb/XBP2/1wT9v9cE/b/XBP2/1sN9f9bDfX/Ww31/1sN9f9hB+3/YQft/2kJ6f9xCOP/dgjg/3sI3v+CCNn/jArT/5YLzP+hDMSlAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABiEO5GZxj1/2cY9f9lF/f/YhX2/2IV9v9iFfb/YhX2/2EQ9P9hEPT/Xw3y/18N8v9hB+3/aQnp/20I5v9xCOP/dgjg/4II2f+MCtP/lgvM/50MyPyzGcw6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaRnz2GcY9f9nGPX/Zxj1/2UX9/9lF/f/YhX2/2IV9v9hEPT/YRD0/2QT8f9pCen/bQjm/3EI4/92COD/ewje/4II2f+MCtP/lgvM/6ANxtXMAM8BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBnyUWgX95doF/eXaBf3l2gX95doF/eXaBf3l2gR8pFoEfKRaBHykWgR8pF1DOaMdQzmjHUM5ox1DOaMiQnViIkJ1YiJCdWInwvHgaYPwEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH8b8zcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7RKOJgAAAAAAAAAAAAAAAAAAAAAAAAAAUw7yEoMg8L8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8A+JmfAKiAgAAAAAAAAAAAAAAAAAAAAAew/kKpYl9P1xF+4tAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADpEZUa7wuA+ekRlRoAAAAAAAAAAAAAAAAAAAAAYhDuRpsn9f+DHfOvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADyCHmM8Al+//MGeSoAAAAAAAAAAAAAAAAAAAAAex3xWZsn9f+WJfT9fxnwGQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAIgBDxCXzw8Ah7//EOgjYAAAAAAAAAAAAAAAAAAAAAiyD2aqEp9v+bJ/X/gh7xoQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAOhnzwCX7/8Ah7//EHd0sAAAAAAAAAAAAAAAAAAAAAhB/zgKEp9v+hKfb/myb0830V9QsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfRX1C4Ug9+qJHvT0iR709Ike9PSPG+3zjxvt85Ua5/KVGufymxnf8qUa2PGlGtjxrhjN5tcfuAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8AqICO0LgOnwCHv/8gZ3/+8Lf1sAAAAAAAAAAAAAAAAAAAAAhh/zk6cr+P+nK/j/oSn2/4Yf85MAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIMd86+QIfX/kCH1/5Mg8P+TIPD/lx3p/5cd6f+fHeT/pR3e/6Ud3v+uHdX/uiDQngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8Q2DbPAJfv/wCHv/8gZ3//ENg2wAAAAAAAAAAAAAAAAAAAAAlyH0pqws+f+nK/j/pyv4/5sm9POOC/cEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH8b8zeQIfX/kyDw/5Mg8P+ZIe7/mx/p/5sf6f+fHeT/pR3e/64d1f+uHdX/sxnMOgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMAM8B7AqB2/AJfv/yBnf/8gZ3//MCcnsAAAAAAAAAAAAAAAAAAAAAkSHzuqws+f+sLPn/rCz5/6cr+P+EH/OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACRH/TVliX0/Zkh7v+ZIe7/mx/p/58d5P+lHd7/rSHe/64d1f+9JNjKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADvC39b8Q2D//AIe//yBnf/9ANy//IIeYwAAAAAAAAAAAAAAAAAAAAAmyX4yLEt+v+xLfr/rCz5/6ws+f+fJvjkzADPAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACTHfRvnyPv/58j7/+fI+//pCHo/6Qh6P+tId7/rSHe/7Uj2v+2HMtsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADrEYnP8Q2D//AJfv/yBnf/9ANy//UCbpsAAAAAAAAAAAAAAAAAAAAAnSX22LQu+/+0Lvv/sS36/6ws+f+sLPn/iyD2agAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB9FfULmyb0858j7/+mJe3/pCHo/6sk6P+tId7/tSPa/7gi1fHXH7gMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAO8Rj0nwEIn/8Q2D//AJfv/yBnf/9ANy//UAa6sAAAAAAAAAAAAAAAAAAAAAnyb45Lgu/P+0Lvv/tC77/7Et+v+xLfr/nyb45AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlyH0pqYl7f+mJe3/qyTo/7El5P+1I9r/tSPa/7og0J4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAO4UkMHwEYz/8Q6G//AJfv/yBnf/9ANy//YBb8UAAAAAAAAAAAAAAAAAAAAAsyn767sv/P+4Lvz/uC78/7Qu+/+0Lvv/sS36/5Ig+FMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAmR/wKaYl7f+rJOj/qyTo/7El5P+1I9r/vSbc/8Ah1SoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8Q6CNu0Vk//wEYz/8Q6G//IMgf/zCXz/9ANy//YBb8UAAAAAAAAAAAAAAAAAAAAAtCz59r8v/f+7L/z/uy/8/7gu/P+1Lv3/tC77/50n+tIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKgj88uxJ+r/sSXk/7kn4/+9Jtz/vSTYygAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7Rmare0Vk//wEYz/8BCJ//IMgf/zCXz/8gZ3//IFdN4AAAAAAAAAAAAAAAAAAAAAvC38+8Iw/f+/L/3/vy/9/7sv/P+4Lvz/uC78/7Uu/f+UHfk9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKcf7GWxJ+r/uSfj/7kn4/+9Jtz/wiHVXQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADtEo4m7Bmb/u0Vk//vE5D/8BCJ//ENg//zCXz/8wl8//EJfPAAAAAAAAAAAAAAAADMAM8BxjD+/8Yw/v/CMP3/wjD9/78v/f+/L/3/uy/8/7gu/P+bJfjIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMwAzwG7J+ziuSfj/78q5P7CJ9vtjgv3BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADtGZqt7Bmb/u4XmP/vE5D/8BCJ//ENg//yDIH/8wl8//MJfP/MAM8BAAAAAAAAAAB/GfAZzDD+/8ow/f/GMP7/xjD+/8Iw/f+/L/3/vy/9/7sv/P+1Lv3/jB75KgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACyI+OZvyrk/sMq4f66INCeAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOkRlRrqHKH47Bmb/u4XmP/vE5D/8BGM//EOhv/yDIH/8gyB//MJfP/wCIAQAAAAAAAAAAB/G/M3zzD+/8ww/v/KMP3/xjD+/8Yw/v/CMP3/wjD9/78v/f+/L/3/oiP6ugAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC4INggvyrk/sMq4f64INggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOsdopfsHKP/7Rqf/+4XmP/wFZP/8BGM//AQif/xDob/8Q2D//IMgf/tEo4mAAAAAAAAAACSIPhT0jD+/88w/v/MMP7/zDD+/8gw/v/GMP7/wjD9/8Iw/f+/L/3/vC38+38Z8BkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvSTYyr0k2MoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA1x+4DOkhrPDsHKP/7Rqf/+4Zm//wFZP/7xOQ//ARjP/wEIn/8Q6G//ENg//xDoI2AAAAAAAAAACTHfRv1jH//9Iw/v/PMP7/zzD+/8ww/v/IMP7/xjD+/8Yw/v/CMP3/wjD9/5ch9KYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAArhvYWMIh1V0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6SCoiesgrP/sHqf/7Rqf/+4Zm//vFpb/7xOQ/+8TkP/wEYz/8BCJ//EOhv/vEY9JAAAAAAAAAACcH/iD2TH//9Yx///SMP7/0jD+/88w/v/MMP7/yjD9/8Yw/v/GMP7/wjD9/7wr+/Z9FfULAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwCogI6SGs8OsgrP/sHqf/7Byj/+0an//uF5j/8BWT//AVk//vE5D/8BGM//AQif/vC39bAAAAAAAAAAChIPeW2TH//9kx///WMf//1DD+/9Iw/v/PMP7/zDD+/8ow/f/KMP3/xjD+/8Yw/v+hIPeWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADoIat66iKy/+ohr//rH6r/7Byj/+0an//uGZv/7heY/+8Wlv/wFZP/7xOQ//ARjP/xDYNsAAAAAAAAAACsIvau2TH//9kx///ZMf//1jH//9Yx///SMP7/zzD+/8ww/v/MMP7/yjD9/8gw/v+8K/v2jgv3BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMwAzwHmJbXk6SO2/+ohr//rIKz/7B6n/+0an//tGp//7hmb/+4XmP/vFpb/8BWT/+8TkP/wDoZ8AAAAAAAAAACiI/q62TH//9kx///ZMf//2TH//9Yx///UMP7/0jD+/88w/v/PMP7/zDD+/8ow/f/KMP3/syHvgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOUgum3oJbr/6SO2/+oisv/rIKz/7B6n/+wco//tGp//7Rqf/+4Zm//uF5j/7xaW//AVk//wD4mZAAAAAAAAAACoI/PL2TH//9kx///ZMf//2TH//9kx///WMf//1jH//9Iw/v/SMP7/zzD+/88w/v/MMP7/vCr27QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOUmvNbnJ73/6CW6/+oisv/qIa//6x+q/+wep//sHKP/7Rqf/+0an//uGZv/7heY/+8Wlv/wD4mZAAAAAAAAAACOC/cEnB/4g7wr+/bZMf//2TH//9kx///ZMf//2TH//9Yx///SMP7/0jD+/88w/v/QMPz+0DD8/qcf7GUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA5SSyT+Ynwf7nJ73/6CW6/+kjtv/qIrL/6yCs/+sfqv/sHqf/7Byj/+wco//tGp//7hid2fENg2zwCogIAAAAAAAAAAAAAAAAAAAAAAAAAACTHfRvsyn769kx///ZMf//2TH//9kx///WMf//1DD+/9Mw/P/SMP7/0DD8/r4o9OMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA5Sa81uUpxv/mJ8H+5ye9/+kjtv/qIrL/6iGv/+sgrP/rH6r/7B6n/+4YndntFZZhzADPAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJIg+FO1Jvzd1jH//9kx///ZMf//1zH+/9Qw/v/UMP7/0zD8/9Aw/P6uG9hYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADsHKo65CvM/+Upxv/mJ8H+5ye9/+gluv/pI7b/6iKy/+ohr//rHKjG7xGPSQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlB35PbMl+dDUMP7/2TH//9cx/v/XMf7/1DD+/9Mw/P+7J+ziAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmJ8HF5CvM/+Upxv/lKcb/5ifB/ugluv/pI7b/6xyoxuwcqjoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACZH/AptST2wNMw/P/XMf7/1zH+/9cx/v/TMPz/sxnMOgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOMitS3jLNL/5CvM/+QrzP/lKcb/5ifB/uofrrTtEo4mAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJ4P1RasIvau0DD8/tcx/v/WMfv/xibsygAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOUnxLnjLNL/4yzS/+UpyPXnILig6RGVGgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAjgv3BLMh74DOK/Xz1jH7/8Ah1SoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7SS/HOIt1vvjK87w5yC4oNcfuAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMAM8BxiPifcok33gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA5SC6beUgum3MAM8BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///n///wAA///4H///AAD///AP//8AAP//wAP//wAA//8AAP//AAD//AAAP/8AAP/4AAAf/wAA//AAAA//AAD/+AAAH/8AAP/4AAAf/wAA//wAAD//AAD//AAAP/8AAP/+AAB//wAA////////AAD///////8AAO//////9wAA7//////3AADn/////+cAAOf/////5wAA4//////nAADD/8AD/8cAAMH/wAP/xwAAwf/gB/+HAADA/+AH/4MAAMD/8A//AwAAwP/wD/8DAADAf/AP/gMAAMB/+B/+AwAAwD/4H/wDAADAP/w//AMAAMAf/D/4AwAAwB/8P/gDAADAD/5/8AMAAMAP/n/wAwAAwAf//+ADAACAB///4AMAAIAD///gAwAAgAP//8ADAACAAf//wAEAAIAB//+AAQAAwAH//4AHAAD4AP//AB8AAP4A//8AfwAA/4B//gH/AAD/4H/+B/8AAP/4P/wf/wAA//4//H//AAD///////8AACgAAAAgAAAAQAAAAAEAIAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEoG8idJCfW1SQn1tUoG8icAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFwW8BBECPKIRgn0+EgK9v9MCfX/UQjz+1UH8pl2EfMUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGwA/wRGCu5qRgnw6kQI8/9ICvb/TAn1/08I9P9TB/P/WAfw/2II6+5rCeV3gBjrBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABSDu5LUA7u1kwM8f9MDPH/TAn1/0gK9v9MCfX/Twj0/1MH8/9dB+7/Zgfp/3AI4/96CN7ZhwnVVQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWBHsolkS7v9VEPH/VRDx/1AN9f9QDfX/UA31/08I9P9TB/P/WAfw/2IH6/9rCOb/dAjh/34I2/+OCtL/nAzImAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABcEu1/XhTx/14U8f9aEvX/WhL1/1YP9/9WD/f/Vgvz/1YI8v9dB+7/Zgfp/3AI4/95CN7/hgnX/5QLzf+iDsJxAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHYR8xRmF/L2YRb0/2EW9P9dFPf/XRT3/1oS9f9dDPP/XQzz/2IH6/9rCOb/dAjh/34I2/+OCtL/mwzI9s0OoREAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgY86xnGPX/Zxj1/2MW+P9jFvj/YhD0/2IQ9P9mDe//bAvq/3EK5f95CN7/hgnX/5QLzf+iDcWdAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZxzxJWgZ92NoGfdjaBn3Y2UV9GBnFvdeaw/xW2sP8Vt4Fe1Zfg3fV34N31eNCdJVmQzJVbEYxBoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIwX8RoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAM0OoREAAAAAAAAAAAAAAABcFvAQfx3xnwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7wyCfuwLiggAAAAAAAAAAHka8iiTJfT2XBbwEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwLigjvCoDq9Qp6GQAAAAAAAAAAehvvQZwo9f+AHO+QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7gyCbPEJff/zBnYpAAAAAAAAAAB4Fe1Zoyr3/5kl9u2AGOsGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAbAD/BIEd+KqEHPOuhhvvrY4a6aqOGumqmRfip6AZ16apGNCe4wCrBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOMAqwTvC4De8Ah6//IEcjoAAAAAAAAAAIYe8XCoK/j/oyr3/4Mf9X0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhiD3vpEg8f+RIPH/lR7r/5od5/+hHN//qhzX/7EbzbQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8Qd5WvEJff/xBnf/9QNzSQAAAAAAAAAAiR7yhq8s+f+oK/j/mSX27d0AwQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACKIPpUlyLx/5ci8f+fIer/oR/l/6kf3f+xH9X/vSDNRwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDYPR8Ah6//MEdP/xB3laAAAAAAAAAACPH/Obsy76/68s+f+rLfn/iCL4aQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACbJPXhnyPu/58h6v+oIeT/sCLc/7ch1ODdAMEBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6xGLS/ENg//xCX3/8wR0//UAbGoAAAAAAAAAAJUg9a63Lvv/sy76/68s+f+bJPXhAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJce7omlJO7/qSTr/K8k4v+3Jd//wCPTgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADrEo7E8A+H//EJff/zBHT/9QBtegAAAAAAAAAAmyP2v7wv/f+4L/z/ty77/7Mu+v+KIPpUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdhHzFKkk6/yvJej/tyXf/7sl2fmxGMQaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6hebO+8Ukf/wD4f/8Ql9//MEdP/0BHGMAAAAAAAAAAChJfnMwjD9/78v/f+4L/z/uC/8/54p+tUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAqSHpt7Qo5/+3Jd//vSXUswAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADtGJm37xSR//ARjP/xDYP/8wh6//QGdJ4AAAAAAAAAAKom+N3HMP3/wjD9/78v/f+8L/3/uC/8/5cg+T4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACqI+RCuirm/8Ap4P+9IM1HAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7RuhKusbnP3vFpT/8BGM//ENg//xCX3/8gd6sAAAAAAAAAAAsSf66csw/v/HMP3/wjD9/78v/f+/L/3/oSX5zAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC7KOLewSjb3gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADsHqGr7Rqf/+8Wlv/wEYz/8A+H//ENg//zC3/BAAAAAAAAAAC6Kvvz0C/+/8sw/v/IMf7/xTD+/8Iw/f+8L/3/nSD0KwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALsk3X/AI9OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA5hqqHusgqPntGp//7hiZ/+8Ukf/wEYz/8A+H//ANg9EAAAAAAAAAAMQt/fvUMf//0C/+/84x/v/LMP7/xzD9/8Iw/f+kJfi8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3RfFC6Qc6gwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADqIKqf6x+r/+0cov/uGJr/7xaU/+8Ukf/wEYz/8BCH4gAAAAAAAAAA0C/+/9kx///UMf//0jH+/84x/v/LMP7/xzD9/8Qt/fuMF/EaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4R62Fegjs/XqIa//7B6n/+0an//uGJn/7xaU/+8Ukf/wEo3vAAAAAAAAAADWMf//2TH//9kx///WMf//0jH+/84x/v/LMP7/yjD8/60k9asAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADoI7GT6CO3/+ohr//sHqf/7Ryi/+0an//uGJr/7xaW/+8Ukf/dAMEBpBzqDMMr+/nZMf//2TH//9kx///XMP//0jH+/9Av/v/OMf7/wyv7+aQc6gwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3RfFC+YmvfHoJbr/6SK0/+sfq//sHqf/7Ryi/+0an//uGJr/7xaU3ewLiggAAAAAAAAAAJoi+mq4KP3o2TH//9kx///XMP//1DH//9Ix/v/OMf7/siHwmQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADoJLaF5SnF/+cnvv/oI7f/6iGv/+sfq//sHqf/7Rqe1ewVl2DdAMEBAAAAAAAAAAAAAAAAAAAAAAAAAACbIPlZtSX83dcw///XMP//1DH//9Qw/f/JLfj2bAD/BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3QDBAeUoxerlKcX/5ye+/+gluv/pIrT/6x2ozO4XnkwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlyD5Prcl+NDUMP3/1DH//9Qw/f++I+iFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADlI7t05CzP/eUqyf/mJsL86yCwwuoXmzsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJ0g9Cu8JfK/0i/7/c4r8/EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOMpzOTkLM/96CG5ue0boSoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADCH+AZyCTpsMon30gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADiJbk+5CTAouEethUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//5////4H///8A///8AD//8AAP//gAH//4AB//+AAf///////////9/////f///7z///+8/wD/PP8A/zh/gf44f4H+OD+B/Dg/w/wYH8P4GB/n+BgP5/AYD/fwGAf/4BgH/+AYA//AGAP/wB4B/4B/gf+B/+D/h//4/x///v9/8oAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAbsKEYI9bVOCPS2VwbzKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABRDeQTSg3tjkkL8/hKCvb/UQjz/18H7PtzCOOZhgzOFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWxPvylgS8f9UEPX/Ugz0/1YH8v9pB+f/fAjd/5gMysIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGMX8nlkF/X/YRX3/18Q9P9lC+7/cgji/4kK1P+lD8BpAAAAAAAAAAAAAAAAAAAAAAAAAACAK/8GAAAAAAAAAABdF+gLZxn3PmYa9zxnEvI5dg7oOIIO3TWWCs0zvyC/CAAAAAAAAAAA/wCABAAAAAB3Ee4PeR3vfAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAO4OhVz/AIAIgBryKJMk9OkAAP8CAAAAAAAAAAAAAP8BeRn1Z4UZ62aPF+VioBjUXv8A/wEAAAAAAAAAAP8A/wHvCn7S9QBwGYMb80KoLPf/hB/1agAAAAAAAAAAAAAAAIwg9M6WIO3/oB3i/7Ac0MUAAAAAAAAAAAAAAADuEYVL8Qd5//MAcCmIG/Fesy75/5sn+OEAAAAAAAAAAAAAAACQH/FqoyTs/68i3/+/I81gAAAAAAAAAAAAAAAA7hCJxfIHd//2AGs5kB70d7wv+/+2L/z/iCP5WAAAAAAAAAAAZgD/Ba0m6e26Jdzv2yS2BwAAAAAAAAAA6xyaP+8SjP/zCXv/8QN0S5Ug9pDHMP3/vzD9/6Qo+9gAAAAAAAAAAAAAAACzI+KgwCTVnQAAAAAAAAAAAAAAAOobnr7uFJH/8w2C//IIemCgIPmn0DD+/8gx/v/CMP3/lx/3QgAAAAAAAAAAuiLdJcQnyycAAAAAAAAAAOciqDXqHqb+7heW//ASjP/yDYF1pSL4utkx///SMP7/yzH+/68m+M4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADpI7G36iCr/+0anv/vFpb/7hGKiZYd92G9Kf7w2TH//9Mx/v/NMPz+qiDqMAAAAAAAAAAAAAAAAAAAAADrIbcn6Ci+++oisf/sHqf/7hia0vATj0QAAAAAAAAAAJ8f/Fq6Jfnd1TD9/8Am78MAAAAAAAAAAAAAAAAAAAAA5SW/suYoxP7pH67P7xqcUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALAf7krFJu3LySjXEwAAAAAAAAAA4S20EeUkwbrqGas9AAAAAAAAAAAAAAAAAAAAAP5/AAD4HwAA8A8AAPgfAAD//wAA//8AAL/9AAC8PQAAnnkAAJ55AAAOcQAAD/EAAAfgAACH4QAA48cAAPvfAAA=
An example application using Angular Material UI

Tips and best practices

Let’s discuss some tips and tricks below:

  • Lazy load components: Use load components when they are needed to reduce the initial load time.

  • Use custom themes: Create a custom theme to align with the brand guidelines.

  • Accessibility: Make sure that the application meets accessibility standards by using Angular Material’s accessible components.

  • Animate carefully: While Angular Material supports animations, overuse can negatively impact performance.

  • Responsive design: Utilize Angular Material’s responsive utilities for optimal display across devices.

Conclusion

Angular Material provides a foundation for building modern, responsive, and accessible web applications. With responsive layouts, customization options, and built-in accessibility, Angular Material is an excellent choice for building UIs. By following this guide, you've taken the first steps toward utilizing the power of Angular Material. As you continue to explore its vast array of components and features, you’ll find that Angular Material significantly accelerates the development process while ensuring a high-quality user interface.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is the material component in Angular?

A Material component in Angular refers to a UI component that is part of the Angular Material library, which provides pre-built, reusable UI elements that follow the Material Design guidelines. These components include buttons, forms, dialogs, cards, and more, making it easier to implement a consistent design system across an Angular application. Each Material component is customizable and designed with accessibility in mind.

What are the components materials?

Angular Material provides a wide range of UI components that are necessary to build a modern web application. These include:

  • Buttons (mat-button, mat-raised-button)
  • Cards (mat-card)
  • Forms and Input Fields (mat-form-field, matInput)
  • Tables (mat-table)
  • Dialogs (mat-dialog)
  • Toolbars (mat-toolbar)
  • Sidenav (mat-sidenav)
  • Tabs (mat-tab-group)
  • Progress Bars (mat-progress-bar)
  • Icons (mat-icon)

Each component is designed following Material Design principles and offers customization options for theming and styling.

What is mdc in Angular?

MDC (Material Design Components) is a modern implementation of the Material Design specifications for Angular Material. It leverages Google’s Material Components for the Web (MDC Web) library and provides updated components built with MDC foundation classes, ensuring better alignment with Google’s Material Design guidelines and providing a more robust component set. MDC aims to bring newer features, performance improvements, and better accessibility to Angular Material components.

What does Angular material styles include?

Angular Material styles include pre-built CSS for various components that ensure adherence to the Material Design guidelines. These styles cover:

  • Typography: Consistent and responsive typography styles.
  • Colors: Pre-defined color palettes for primary, accent, and warn colors that can be customized.
  • Layouts: Flexbox-based responsive layouts.
  • Animations: Smooth and responsive animations to improve the user experience.
  • Theming: Customizable themes allow you to easily define color schemes across your application.

These styles help maintain consistency and professionalism in your UI design while providing a responsive and mobile-first experience.

Free Resources

Attributions:
  1. undefined by undefined
Copyright ©2025 Educative, Inc. All rights reserved