https://github.com/techfever-soft/ngx-mat-enhanced
An Angular 16+ library for custom extended Material components
https://github.com/techfever-soft/ngx-mat-enhanced
Last synced: 5 months ago
JSON representation
An Angular 16+ library for custom extended Material components
- Host: GitHub
- URL: https://github.com/techfever-soft/ngx-mat-enhanced
- Owner: techfever-soft
- Created: 2023-09-10T18:16:21.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-14T20:24:10.000Z (over 2 years ago)
- Last Synced: 2025-01-21T09:48:41.866Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 181 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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
Medias gallery Component
```html
delete selection
```
```typescript
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();
}
}
````
Breadcrumb Component
```html
```
```typescript
public pagePathObject: BreadCrumbOptions = [
{
fullPath: '/',
label: 'Home',
},
{
fullPath: '/test',
label: 'Test page',
},
];
public breadcrumOptions: BreadCrumbOptions = {
type: 'buttons',
buttons: {
activeItemColor: 'primary',
},
separator: {
icon: 'keyboard_arrow_right',
},
};
```