ngx-mat-enhanced
v16.0.2
Published
An Angular 16+ library for custom extended **Material** components
Downloads
1
Readme
🔛 ngx-mat-enhanced
An Angular 16+ library for custom extended Material components
Features
[x] Medias gallery Component : Upload your files and preview them using an horizontal list
[x] Breadcrumbs Component
[ ] Bottom-bar Component
[ ] Headers Component
[ ] Surveys Component
[ ] Reusable Cards Component
[ ] Inside-App Notifications Component
[ ] Inline-comments Component
[ ] Nested-comments Component
Getting started
ng add @angular/material
npm i -s ngx-mat-enhanced
Components
<ngx-mat-enhanced-medias [fileInput]="newFile" color="accent" [draggableItems]="true"></ngx-mat-enhanced-medias>
<form [formGroup]="mediaForm">
<input type="file" formControlName="input" (change)="onFileInput($event)" />
</form>
<button (click)="onDeleteSelected()">delete selection</button>
import { Component, ViewChild } from "@angular/core";
import { FormBuilder, FormGroup } from "@angular/forms";
import { MediasService } from "ngx-mat-enhanced";
@Component({
selector: "app-medias",
templateUrl: "./medias.component.html",
styleUrls: ["./medias.component.scss"],
})
export class MediasComponent {
public mediaForm: FormGroup;
public newFile!: File;
constructor(private mediasService: MediasService, private fb: FormBuilder) {
this.mediaForm = this.fb.group({
input: [""],
});
}
onFileInput(event: any) {
const file = event.target.files[0] as File;
this.newFile = file;
this.mediaForm.reset();
}
public onDeleteSelected() {
this.mediasService.deleteSelected();
}
}
<ngx-mat-enhanced-breadcrumb
[path]="pagePathObject"
[options]="breadcrumOptions"
></ngx-mat-enhanced-breadcrumb>
public pagePathObject: BreadCrumbOptions = [
{
fullPath: '/',
label: 'Home',
},
{
fullPath: '/test',
label: 'Test page',
},
];
public breadcrumOptions: BreadCrumbOptions = {
type: 'buttons',
buttons: {
activeItemColor: 'primary',
},
separator: {
icon: 'keyboard_arrow_right',
},
};