ngrx-dashboard-test2-afterrestarts
v0.0.6
Published
```javascript import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { MatMenuModule } from "@angular/material/menu";
Downloads
2
Maintainers
Readme
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: [],
},
];