README
NgxCrudApiLayout
<ngx-crud-api-layout [CRUDOperation]="this"> </ngx-crud-api-layout>
Install
npm i ngx-crud-api-layout
index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GroupComponent } from './group/group.component';
import { NgxCrudApiLayoutModule , NgxCrudApiLayoutService} from 'ngx-crud-api-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DatePipe, DecimalPipe } from '@angular/common';
const customNotifierOptions: NotifierOptions = {
position: {
horizontal: {
position: 'left',
distance: 12
},
vertical: {
position: 'bottom',
distance: 12,
gap: 10
}
},
theme: 'material',
behaviour: {
autoHide: 5000,
onClick: 'hide',
onMouseover: 'pauseAutoHide',
showDismissButton: true,
stacking: 4
},
animations: {
enabled: true,
show: {
preset: 'slide',
speed: 300,
easing: 'ease'
},
hide: {
preset: 'fade',
speed: 300,
easing: 'ease',
offset: 50
},
shift: {
speed: 300,
easing: 'ease'
},
overlap: 150
}
};
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
NgxCrudApiLayoutModule,
NotifierModule.withConfig(customNotifierOptions)
],
providers: [DatePipe, DecimalPipe, NgxCrudApiLayoutService],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
bootstrap: [AppComponent]
})
export class AppModule { }
employee.model.ts
export declare interface Employee {
Id:Number;
firstName:String;
lastName:String;
age:Number;
dateofbirth:String;
salary:Number;
position:String;
office:String;
}
employee.component.ts
import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule, FormControl, Validators, FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { CRUDOperation, MasterScreen, MessageType, Result } from 'ngx-crud-api-layout';
import { Employee } from './employee.model';
@Component({
selector: 'employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent implements OnInit, CRUDOperation<Employee, Number>{
public employeeForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
}
ngFormGroup(): FormGroup {
this.employeeForm = this.formBuilder.group({
Id: [null, Validators.required],
firstName: [null, Validators.required],
lastName: [null, Validators.required],
age: [null, Validators.required],
dateofbirth: [null, Validators.required],
salary: [null, Validators.required],
position: [null, Validators.required],
office: [null, Validators.required],
});
return this.employeeForm;
}
ngPrimaryId(): string {
return "Id";
}
ngScreenInformation(): MasterScreen {
return {
id: "Employee",
name: "Employee",
description: "Employee",
size: "md",
permission: { create: true, view: true, edit: true, delete: true },
columnConfig: [
{ name: 'Id', key: 'Id', dataType: 'Number', enable: true },
{ name: 'FirstName', key: 'firstName', dataType: 'String', enable: true },
{ name: 'LastName', key: 'lastName', dataType: 'String', enable: true },
{ name: 'Age', key: 'age', dataType: 'Number', enable: true },
{ name: 'Dateofbirth', key: 'dateofbirth', dataType: 'Date', enable: true },
{ name: 'Salary', key: 'salary', dataType: 'Currency', enable: true },
{ name: 'Position', key: 'position', dataType: 'String', enable: true },
{ name: 'Office', key: 'office', dataType: 'String', enable: true },
]
}
}
ngOnInit() {
}
ngFindAll(): Employee[] {
return [
{ Id: 1, firstName: "Airi", lastName: "Satou", position: "Accountant", office: "Tokyo", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 2, firstName: "Angelica", lastName: "Ramos", position: "Junior Technical Author ", office: "London", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 3, firstName: "Ashton", lastName: "Cox", position: "Software Engineer ", office: "San Francisco ", age: 33, dateofbirth: "2008/11/28", salary: 1200000 },
{ Id: 4, firstName: "Bradley", lastName: "Greer", position: "Chief Executive Officer (CEO) ", office: "New York ", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 5, firstName: "Angelica", lastName: "Ramos", position: "Junior Technical Author ", office: "London", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 6, firstName: "Ashton", lastName: "Cox", position: "Software Engineer ", office: "San Francisco ", age: 33, dateofbirth: "2008/11/28", salary: 1200000 },
{ Id: 7, firstName: "Bradley", lastName: "Greer", position: "Chief Executive Officer (CEO) ", office: "New York ", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 8, firstName: "Angelica", lastName: "Ramos", position: "Junior Technical Author ", office: "London", age: 14, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 9, firstName: "Ashton", lastName: "Cox", position: "Software Engineer ", office: "San Francisco ", age: 11, dateofbirth: "2008/11/28", salary: 1200000 },
{ Id: 10, firstName: "Bradley", lastName: "Greer", position: "Chief Executive Officer (CEO) ", office: "New York ", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 11, firstName: "Angelica", lastName: "Ramos", position: "Junior Technical Author ", office: "London", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 12, firstName: "Ashton", lastName: "Cox", position: "Software Engineer ", office: "San Francisco ", age: 33, dateofbirth: "2008/11/28", salary: 1200000 },
{ Id: 13, firstName: "Bradley", lastName: "Greer", position: "Chief Executive Officer (CEO) ", office: "New York ", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 14, firstName: "Angelica", lastName: "Ramos", position: "Junior Technical Author ", office: "London", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 15, firstName: "Ashton", lastName: "Cox", position: "Software Engineer ", office: "San Francisco ", age: 12, dateofbirth: "2008/11/28", salary: 1200000 },
{ Id: 16, firstName: "Bradley", lastName: "Greer", position: "Chief Executive Officer (CEO) ", office: "New York ", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 17, firstName: "Angelica", lastName: "Ramos", position: "Junior Technical Author ", office: "London", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 18, firstName: "Ashton", lastName: "Cox", position: "Software Engineer ", office: "San Francisco ", age: 33, dateofbirth: "2008/11/28", salary: 1200000 },
{ Id: 19, firstName: "Bradley", lastName: "Greer", position: "Chief Executive Officer (CEO) ", office: "New York ", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 20, firstName: "Angelica", lastName: "Ramos", position: "Junior Technical Author ", office: "London", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 21, firstName: "Ashton", lastName: "Cox", position: "Software Engineer ", office: "San Francisco ", age: 33, dateofbirth: "2008/11/28", salary: 1200000 },
{ Id: 22, firstName: "Bradley", lastName: "Greer", position: "Chief Executive Officer (CEO) ", office: "New York ", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 23, firstName: "Angelica", lastName: "Ramos", position: "Junior Technical Author ", office: "London", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 24, firstName: "Ashton", lastName: "Cox", position: "Software Engineer ", office: "San Francisco ", age: 90, dateofbirth: "2008/11/28", salary: 1200000 },
{ Id: 25, firstName: "Bradley", lastName: "Greer", position: "Chief Executive Officer (CEO) ", office: "New York ", age: 33, dateofbirth: "2008/11/28", salary: 162700 },
{ Id: 26, firstName: "Brenden", lastName: "Wagner", position: "Software Engineer ", office: "London", age: 33, dateofbirth: "2008/11/28", salary: 206850 }
]
}
ngFindById(Id: Number): Employee {
return { Id: 1, firstName: "Airi", lastName: "Satou", position: "Accountant", office: "Tokyo", age: 33, dateofbirth: "2008/11/28", salary: 162700 }
}
ngNew(): void {
}
ngCreate(): Result {
if (this.employeeForm.valid) {
return { code: "0", message: "Employee Created", messageType: MessageType.SUCCESS }
} else {
return { code: "0", message: "Error", messageType: MessageType.FAILURE }
}
}
ngUpdate(): Result {
if (this.employeeForm.valid) {
return { code: "0", message: "Employee Updated ", messageType: MessageType.SUCCESS }
} else {
return { code: "1", message: " Error ", messageType: MessageType.FAILURE }
}
}
ngDelete(Id: Number): Result {
return { code: "0", message: "Employee Deleted ", messageType: MessageType.SUCCESS }
}
isFieldValid(field: string) {
return !this.employeeForm.get(field).valid && this.employeeForm.get(field).touched;
}
}
employee.component.html
<ngx-crud-api-layout [CRUDOperation]="this">
<form name="employeeForm" class="form-validation" [formGroup]="employeeForm">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="Id">Id</label>
<input type="text" class="form-control form-control-sm" id="Id" formControlName="Id" maxlength=10>
<app-field-error-display [displayError]="isFieldValid('Id')" errorMsg="Required Id"></app-field-error-display>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="firstName">FirstName</label>
<input type="text" class="form-control form-control-sm" id="firstName" formControlName="firstName"
maxlength=35>
<app-field-error-display [displayError]="isFieldValid('firstName')" errorMsg="Required firstName">
</app-field-error-display>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="lastName">LastName</label>
<input type="text" class="form-control form-control-sm" id="lastName" formControlName="lastName" maxlength=35>
<app-field-error-display [displayError]="isFieldValid('lastName')" errorMsg="Required lastName">
</app-field-error-display>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="age">Age</label>
<input type="number" class="form-control form-control-sm" id="age" formControlName="age" maxlength=2>
<app-field-error-display [displayError]="isFieldValid('age')" errorMsg="Required age">
</app-field-error-display>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="dateofbirth">Dateofbirth</label>
<div class="input-group">
<input type="date" class="form-control form-control-sm" id="dateofbirth" formControlName="dateofbirth">
</div>
<app-field-error-display [displayError]="isFieldValid('dateofbirth')" errorMsg="Required dateofbirth">
</app-field-error-display>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="salary">Salary</label>
<input type="text" class="form-control form-control-sm" id="salary" formControlName="salary" maxlength=10>
<app-field-error-display [displayError]="isFieldValid('salary')" errorMsg="Required salary">
</app-field-error-display>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="position">Position</label>
<input type="text" class="form-control form-control-sm" id="position" formControlName="position" maxlength=25>
<app-field-error-display [displayError]="isFieldValid('position')" errorMsg="Required position">
</app-field-error-display>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="office">Office</label>
<input type="text" class="form-control form-control-sm" id="office" formControlName="office" maxlength=25>
<app-field-error-display [displayError]="isFieldValid('office')" errorMsg="Required office">
</app-field-error-display>
</div>
</div>
</div>
</form>
</ngx-crud-api-layout>
License
Donation
If this project help you reduce time to develop, you can give me a cup of tea :)
