Home Computer All Angular Materiel Module with Dependencies Version 9

All Angular Materiel Module with Dependencies Version 9

78
0

All Angular Materiel Module with Dependencies Version 9: Last two days I have been trying to add Angular Materiel in my Project with Bootstrap . But Angular Materiel 9+ had separated it’s dependencies. So I could fixed it with a extra module . It can be any name like “AngularMaterialModule“.

All Angular Materiel Module with Dependencies

I give you   AngularMaterialModule with Dependency and Import and Export Logic . Please don’t mind because my English writing skill so dirty .

How to generate a module like this.

Cli Command:

ng g module [ModuleName]

Example: ng g module AngularMaterialModule

if you want to use routing ,

Example: ng g module AngularMaterialModule –routing 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
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 { MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ],
  exports:[
    MatCheckboxModule,
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    
  ]
})
export class AngularMaterialModule { }

then you can use it another module like given bellow:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
.....
import { AngularMaterialModule } from '../common/angular-material/angular-material.module';
.....

@NgModule({
  declarations: [ ],
  imports: [
    CommonModule,
...
    AngularMaterialModule,
...
  ]
})
export class AdminModule { }

About Angular Material :

Progressive Web Apps

Use modern web platform capabilities to deliver app-like experiences. High performance, offline, and zero-step installation.

Native

Build native mobile apps with strategies from Cordova, Ionic, or NativeScript.

Desktop

Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you’ve learned for the web plus the ability to access native OS APIs.

More ……….

Our Social Media:

DG Food Job Exam Question Solution Download PDF

YouTube Channel Ziggasa

Facebook Comments

Contact us: 

If you want more information, so contact us with Facebook Fan Page as soon as possible. We are waiting for you! Or Email us following by our website’s Contact Page. Thank you for visiting here.

Please Comment Here