Get Started

app.component.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatMenuModule } from "@angular/material/menu";
import { MatIconModule } from "@angular/material/icon";
import { MatButtonModule } from "@angular/material/button";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { DragDropModule } from "@angular/cdk/drag-drop";

// Library import
import { MatDashboardModule } from "angular-mat-dashboard";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatDashboardModule,
    MatMenuModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatButtonModule,
    DragDropModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Component.ts

import { moveItemInArray } from '@angular/cdk/drag-drop';
import { Component, OnInit } from '@angular/core';
import { DAHBOARD_DATA } from './utils/data';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  title = 'angular-mat-dashboard';
  data = DAHBOARD_DATA;
  selectedData: any[] = [];

  constructor() {}

  ngOnInit(): void {
    this.selectedData = JSON.parse(
      sessionStorage.getItem('selectedFilters') as any
    );
    // set true value in filter data
    const filterData = [...this.data];
    this.selectedData?.forEach((item) => {
      filterData.forEach((filter, index) => {
        if (filter?.id === item?.id) {
          filterData[index].is_checked = true;
        }
      });
    });
  }

  updateFilterHandler($event: any) {
    let filter: any[] = [...this.data];
    const index = filter.findIndex((item: any) => item?.id == $event?.id);
    filter[index] = $event;
    this.data = filter;
    const selectFilterItems = this.data.filter(
      (item: any) => item?.is_checked === true
    );
    sessionStorage.setItem(
      'selectedFilters',
      JSON.stringify(selectFilterItems)
    );
    this.selectedData = selectFilterItems;
  }

  dropedFilterHandler($event: any) {
    moveItemInArray(this.selectedData, $event.item.data, $event.container.data);
  }
}

Component HTML

<div class="container">
  <app-mat-dashboard
    [data]="data"
    [selectedItems]="selectedData"
    (updateFilter)="updateFilterHandler($event)"
    (dropedFilter)="dropedFilterHandler($event)"
  ></app-mat-dashboard>
</div>

Data Sample

export const DAHBOARD_DATA = [
  {
    id: "1",
    title: "Notification widget",
    count: 25000,
    icon_url: "",
    cols: 6,
    rows: 4,
    is_checked: false,
    type: "count",
    data: [],
  },
  {
    id: "2",
    title: "Enrolment progress widget",
    count: 50000,
    icon_url: "",
    cols: 6,
    rows: 2,
    is_checked: false,
    type: "count",
    data: [],
  },
  {
    id: "3",
    title: "Breakup by manual entry to integration with third party",
    count: 50000,
    icon_url: "",
    cols: 3,
    rows: 2,
    is_checked: false,
    type: "count",
    data: [],
  },
  {
    id: "4",
    title: "Total number of students",
    count: 50000,
    icon_url: "",
    cols: 3,
    rows: 2,
    is_checked: false,
    type: "count",
    data: [],
  },
  {
    id: "5",
    title: "Student breakup by gender",
    count: 50000,
    icon_url: "",
    cols: 3,
    rows: 2,
    is_checked: false,
    type: "count",
    data: [],
  },
];