@angular/material

Form Controls

Form controls are essential for collecting input from the user. @angular/material provides various form controls like input fields, checkboxes, radio buttons, and select dropdowns. The code sample demonstrates how to import and use the MatInputModule for text inputs.

import {MatInputModule} from '@angular/material/input';

@NgModule({
  imports: [MatInputModule]
})
export class MyModule {}

Navigation

Navigation components help users move through the application. This includes menus, side navigation, and toolbars. The code sample shows how to import the MatToolbarModule to use a Material Design toolbar in your application.

import {MatToolbarModule} from '@angular/material/toolbar';

@NgModule({
  imports: [MatToolbarModule]
})
export class MyModule {}

Layout

Layout components assist in structuring the view of an application. @angular/material offers grid lists, cards, and tabs to help organize content. The code sample illustrates the use of MatGridListModule for creating grid layouts.

import {MatGridListModule} from '@angular/material/grid-list';

@NgModule({
  imports: [MatGridListModule]
})
export class MyModule {}

Buttons & Indicators

Buttons and indicators are used for actions and status feedback. This category includes buttons, progress bars, and spinner indicators. The code sample demonstrates importing MatButtonModule to use Material Design buttons.

import {MatButtonModule} from '@angular/material/button';

@NgModule({
  imports: [MatButtonModule]
})
export class MyModule {}