Introduction to Angular Material Library for UI Components

Angular Material is a popular glance-over UI component library for Angular apps that are built on the basis of the Material Design concept that is well-recognized by Google among others.

It provides us the base with set of standard and already prewritten front end frameworks to design a ready to go presentable website which is responsive, modern and timer appealing.

Using Pre-built Angular Material Components

Angular Material provides ready to use library of components that let users accommodate them into their angular projects with ease.

Here are some commonly used components:

Buttons: Angular Material suggests the use of flat, raised as well as icon buttons.

Cards: Cards are a versatile container component for displaying content. They can contain images, text, buttons, and other elements.

Forms: Angular Material offers form field components like input, select, checkbox, radio buttons, date picker, and autocomplete, all styled according to Material Design guidelines.

Navigation: By utilizing the toolbar, sidenav, and tabs, Angular Material gives components for creating navigation menus and layouts.

Dialogs and Modals: Angular Material provides the dialog and snack-bar components which you can use to add popups and notifications.

Customizing Themes and Styles

Angular Material offering you to define themes and styles to conform with your branding or design principle through customization.

Here's how you can customize themes:

• Theme Configuration: Angular Material is built on a simple import of .scss variables for theming. You can set the app color scheme, fonts, and other properties via styles.scss file in your Angular project’s directory.
• Theme Palette: Customize the primary, accent, and warn colors using the $mat-primary, $mat-accent, and $mat-warn Sass variables, respectively.
• Typography: Customize typography settings like font family, size, weight, and line height using the $mat-typography Sass variable.
• Global Styles: You can also apply global styles and overrides to Angular Material components using CSS or Sass.

                          
// styles.scss
@import '~@angular/material/theming';
@include mat-core();

$custom-primary: mat-palette($mat-indigo);
$custom-accent: mat-palette($mat-pink, A200, A100, A400);

$custom-theme: mat-light-theme(
  $custom-primary,
  $custom-accent
);

@include angular-material-theme($custom-theme);