Material Crud Manager
Description
Simple and Customizable CRUD interface for RESTful APIs, with the adition of Restore, Search, Clone, Order and Infinite Scroll Functions.
Demo
You can use the manager here
Usage
Installation
Install package:
npm install --save ngx-crud-manager
Add Angular Material (skip if you already installed it):
ng add @angular/material
Add Angular Material Theme And FontAwesome (scss)
@import '~@angular/material/theming';
@import '~@fortawesome/fontawesome-free/css/all.css';
Adding Custom Material Theme
@import '~ngx-crud-manager/styles/theme;
@include mat-core();
$ngx-primary: mat-palette($mat-blue-grey);
$ngx-accent: mat-palette($mat-cyan, 500, 200, 900);
$ngx-warn: mat-palette($mat-red);
$ngx-theme: mat-light-theme($ngx-primary, $ngx-accent, $ngx-warn);
@include ngx-crud-color($ngx-theme);
Setup
Just import the module to your app.module.ts
imports: [
...
NgxCrudModule
]
Creating your first CRUD Service
In order to make our interface work with your api, you need to declare a service with the ICRUDService Methods.
The library also has a SetupParams function in order to make things easier for you.
Make sure you have HttpClientModule and RouterModule.forRoot() imported.
item.service.ts
@Injectable({
providedIn: 'root'
})
export class ItemService implements ICRUDService {
apiUrl = 'http://localhost:3000/api';
constructor(private http: HttpClient) {
}
index(value = null, page = 1){
return this.http.get(this.apiUrl + '/items', SetupParams({search: value, page}));
}
create(value) {
return this.http.post(this.apiUrl + '/items', {
item: value
}, SetupParams());
}
update(id, value) {
return this.http.put(this.apiUrl + '/items', {
item: value
}, SetupParams());
}
destroy(id) {
return this.http.delete(this.apiUrl + '/items/' + id, SetupParams());
}
restore(id) {
return this.http.delete(this.apiUrl + '/items/' + id + '/restore', SetupParams());
}
}
Adding the interface to a component
app.component.html
<ngx-crud-manager [service]="itemService"></ngx-crud-manager>
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public itemService: ItemService){
}
}
Adding a custom form
Using ReactiveForms we create a new Form with our required fields
app.component.ts
export class AppComponent {
formGroup = new FormGroup({
name: new FormControl('', Validators.required)
});
constructor(
public itemService: ItemService,
private fb: FormBuilder,
) {
}
}
Then we add our form template to the component and setup our crud manager formTemplate and formGroup values
app.component.html
<ngx-crud-manager [service]="itemService" [formTemplate]="formTemplate" [formGroup]="formGroup"></ngx-crud-manager>
<ng-template #formTemplate let-form="form">
<form [formGroup]="form">
<mat-form-field>
<input matInput type="text" placeholder="Item Name" required formControlName="name" name="name">
</mat-form-field>
</form>
</ng-template>
Setting a custom list item display
We create a item template and setup it in the crud manager
<ng-template #itemTemplate let-item>
<span>{{item.id}} - {{item.name}}</span>
</ng-template>
<ngx-crud-manager [service]="itemService" [itemTemplate]="itemTemplate"></ngx-crud-manager>
Nested Routes
If you have routes like /collection/:id/items you can add arguments to the manager
app.component.html
<ngx-crud-manager [service]="itemService" [formTemplate]="formTemplate" [formGroup]="formGroup" [args]=[collection.id]></ngx-crud-manager>
CRUD Manager with call your service with aditional arguments
item.service.ts
create(value,collection_id) {
return this.http.post(this.apiUrl + 'collection/'+collection_id+'/items', {
item: value
}, SetupParams());
}
You can use this to add custom params
app.component.html
<ngx-crud-manager [service]="itemService" [formTemplate]="formTemplate" [formGroup]="formGroup" [args]=[collection.id,{token: token}]></ngx-crud-manager>
item.service.ts
create(value,collection_id,params) {
return this.http.post(this.apiUrl + 'collection/'+collection_id+'/items', {
item: value
}, SetupParams(params));
}
Using a dynamic service
Setup as argument the Restful api endpoint and provide to you service.
app.component.html
<ngx-crud-manager [service]="itemService" [formTemplate]="formTemplate" [formGroup]="formGroup" [args]=[endpoint]></ngx-crud-manager>
dynamic.service.ts
@Injectable({
providedIn: 'root'
})
export class DynamicService implements ICRUDService {
apiUrl = 'http://localhost:3000/api';
constructor(private http: HttpClient) {
}
index(value = null, page = 1, endpoint) {
return this.http.get(this.apiUrl + `/${endpoint}`, SetupParams({search: value, page}));
}
create(value, endpoint) {
return this.http.post(this.apiUrl + `/${endpoint}`, {
item: value
}, SetupParams());
}
update(id, value, endpoint) {
return this.http.put(this.apiUrl + `/${endpoint}`, {
item: value
}, SetupParams());
}
destroy(id, endpoint) {
return this.http.delete(this.apiUrl + `/${endpoint}/` + id, SetupParams());
}
restore(id, endpoint) {
return this.http.delete(this.apiUrl + `/${endpoint}/` + id + '/restore', SetupParams());
}
}
Backend required responses
You can use any Url and request format since you can configure it in your service, the only real requirement is your backend response
| URL | SERVICE METHOD | REQUEST | RESPONSE | CODE |
|---|---|---|---|---|
| GET /items | index | {page: number, search: string} | items[{id:number}] | 200 |
| POST /items | create | {item: any} | {id: number, ...item} | 200-201 |
| PUT /items/:id | update | {id: number, item: any} | {id: number, ...item} | 200 |
| DELETE /items/:id | destroy | {id: number} | any | 200 |
| PATCH /items/:id/restore | restore | {id: number} | any | 200 |
| POST /items/:id/clone | clone | {id: number} | {id: number, ...item} | 200 |
| POST /items/swap | swap | {ordered_ids: number[]} | any | 200 |