Angular Course Class Day-3 in English

 

Angular Material Module:

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

// Material Form Controls

import { MatAutocompleteModule } from '@angular/material/autocomplete';

import { MatCheckboxModule } from '@angular/material/checkbox';

import { MatDatepickerModule } from '@angular/material/datepicker';

import { MatFormFieldModule } from '@angular/material/form-field';

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

import { MatRadioModule } from '@angular/material/radio';

import { MatSelectModule } from '@angular/material/select';

 

// Material Navigation

import { MatMenuModule } from '@angular/material/menu';

import { MatSidenavModule } from '@angular/material/sidenav';

 

// Material Layout

import { MatCardModule } from '@angular/material/card';

import { MatDividerModule } from '@angular/material/divider';

import { MatExpansionModule } from '@angular/material/expansion';

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

import { MatListModule } from '@angular/material/list';

 

 

// Material Layout

 

// Material Buttons & Indicators

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

import { MatButtonToggleModule } from '@angular/material/button-toggle';

import { MatBadgeModule } from '@angular/material/badge';

import { MatChipsModule } from '@angular/material/chips';

import { MatIconModule } from '@angular/material/icon';

import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

import { MatProgressBarModule } from '@angular/material/progress-bar';

import { MatRippleModule } from '@angular/material/core';

// Material Popups & Modals

import { MatBottomSheetModule } from '@angular/material/bottom-sheet';

import { MatDialogModule } from '@angular/material/dialog';

import { MatSnackBarModule } from '@angular/material/snack-bar';

import { MatTooltipModule } from '@angular/material/tooltip';

// Material Data tables

import { MatPaginatorModule } from '@angular/material/paginator';

import { MatSortModule } from '@angular/material/sort';

import { MatTableModule } from '@angular/material/table';

@NgModule({

  declarations: [],

  imports: [

    CommonModule, MatAutocompleteModule,MatCheckboxModule,MatDatepickerModule,MatFormFieldModule,

   MatInputModule,MatRadioModule,MatSelectModule,MatMenuModule,MatSidenavModule,

   MatCardModule,MatDividerModule,MatExpansionModule,MatGridListModule,MatListModule,

   MatButtonModule,MatButtonToggleModule,MatBadgeModule,MatChipsModule,MatIconModule,

   MatProgressSpinnerModule,MatProgressBarModule,MatRippleModule,MatBottomSheetModule,

   MatDialogModule,MatSnackBarModule,MatTooltipModule,MatPaginatorModule,MatSortModule,

   MatTableModule

  ],

})

export class MaterialModule { }

Add Material Module in AppModule.ts

-> Here I have highlighted in red color.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { MaterialModule } from './material/material.module';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    MaterialModule,

    BrowserAnimationsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }