Material Admin

ng new website --style=scss --routing --skip-tests

Install Material Component

  npm install --save @angular/material @angular/cdk
  npm install --save hammerjs
  npm install @angular/flex-layout
  
  modify main.ts
  import 'hammerjs';
  
  modify style.scss 
  @import '~@angular/material/prebuilt-themes/indigo-pink.css';    
  
  in app below
  ng g module shared
  
  shared.module.ts
  ----------------
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FlexLayoutModule } from '@angular/flex-layout';
  import { MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule,
           MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatGridListModule,
           MatIconModule,  MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, 
           MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, 
           MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, 
           MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule, 
           MatTooltipModule, MatStepperModule } from '@angular/material';
  
  @NgModule({
    imports: [
      CommonModule, FlexLayoutModule, 
      MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule,
      MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatGridListModule,
      MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule,
      MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule,
      MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule,
      MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatStepperModule
    ],
    exports: [
      FlexLayoutModule,
      MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule,
      MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatGridListModule,
      MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule,
      MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule,
      MatSelectModule, MatSidenavModule,MatSliderModule, MatSlideToggleModule, MatSnackBarModule,
      MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatStepperModule
    ],
    declarations: []
  })
  export class SharedModule { }
  

  Load the module for your app (with global configuration)
  import { SharedModule } from './shared/shared.module';
  import { FormsModule ,ReactiveFormsModule} from '@angular/forms';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  @NgModule({
    ...
    imports: [
      ...
      SharedModule,
      FormsModule,
      ReactiveFormsModule,
      BrowserAnimationsModule
      ],
  

Install ngx-perfect-scrollbar

    npm i ngx-perfect-scrollbar
    Load the module for your app (with global configuration)
    import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
    import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
    import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

    const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
      suppressScrollX: true
    };

    @NgModule({
      ...
      imports: [
        ...
        PerfectScrollbarModule
      ],
      providers: [
        {
          provide: PERFECT_SCROLLBAR_CONFIG,
          useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
        }
      ]
    })
    

Create app.settings.module

    ng g class app.settings
    rename app.settings.module.ts 

    export class Settings {
         constructor(public name: string, 
                     public loadingSpinner: boolean,
                     public fixedHeader:boolean,
                     public sidenavIsOpened: boolean,
                     public sidenavIsPinned: boolean,
                     public sidenavUserBlock: boolean,
                     public menu: string,
                     public menuType: string,
                     public theme: string,
                     public rtl: boolean) { }
               }
   

Create app.settings.ts

    ng g service app.settings
    rename app.settings.ts 

    import { Injectable } from '@angular/core';
    import { Settings } from './app.settings.model';

    @Injectable()
    export class AppSettings {
       public settings = new Settings(
           'Gradus',   //theme name
           true,       //loadingSpinner
           true,       //fixedHeader
           true,       //sidenavIsOpened
           true,       //sidenavIsPinned  
           true,       //sidenavUserBlock 
           'vertical', //horizontal , vertical
           'default',  //default, compact, mini
           'indigo-light',   //indigo-light, teal-light, red-light, blue-dark, green-dark, pink-dark
           false       // true = rtl, false = ltr
       )
   }
   Load the module for your app (with global configuration)
   import { AppSettings } from './app.settings';
   @NgModule({
      ...
      imports: [
        ...
      ],
      providers: [
        AppSettings,
      ]
    })