Run `ng serve demo-app` to start the demo-app to debug the components. demo-app import local `raise-common-lib`, so you can import the component you want to debug
npm install raise-frontend-component-newng serve demo-app to start the demo-app to debug the components. demo-app import local raise-common-lib, so you can import the component you want to debug
tsx
// raise-common-lib.module.ts
@NgModule({
declarations: [
CommonGridComponent,
],
imports: [CommonModule, GridModule, PagerModule, GridAllModule],
providers: [
PageService,
SortService,
FilterService,
ExcelExportService,
EditService,
ResizeService,
ToolbarService,
ColumnChooserService,
AggregateService,
ColumnMenuService,
DetailRowService,
SelectionService,
GroupService,
],
exports: [
CommonGridComponent,
]
})
`
In short, components are written in declarations and exports, modules are written in imports, and services are written in providers.
`tsx
// public-api.ts
/*
* Public API Surface of raise-common-lib
*/
export * from './lib/common-grid/index.component';
export * from './lib/service/common-function.service';
export * from './lib/raise-common-lib.module';
`
- how to use
import module
`tsx
// xxx.modules.ts
import { RaiseCommonLibModule } from "raise-common-lib";
@NgModule({
imports: [RaiseCommonLibModule]
})
`
import service
`tsx
// xxx.component.ts
import { CommonFunctionService } from "raise-common-lib";
export class xxxComponent implements OnInit {
constructor(
public cmFun: CommonFunctionService
)
useComonFunc() {
const dd = this.cmFun.testMethod();
console.log('dd',dd)
}
}
`
- ### Style
The global style file is placed in projects\raise-common-lib\src\assets\style ,
syncfusion.min.css is syncfusion style,variables.scss is our extracted css variables, style.scss is our custom style.
- how to code, for example:
`scss
:root {
/*
* font-family
*/
--rs-font-family: Arial;
/*
* Background
*/
--rs-container-bg: #f8fafb;
/*
* text
*/
--rs-text-color: #1f3f5c;
--rs-labels-color: #6c7c90;
--rs-placeholder-color: #0369c2;
/*
* border
*/
/*
* grid
*/
--rs-grid-header-cell-font-size: 10px; // grid header cell font size
--rs-grid-row-cell-font-size: 11px; // grid row cell font size
--rs-grid-row-hover-bg: rgba(31, 123, 255, 0.04); // grid row hover color
--rs-grid-row-active-bg: rgba(31, 123, 255, 0.08); // grid row active color
}
`
in your component style file, you can import variables.scss and use the variables.
`scss
@import '../../assets/style/variables.scss';
.e-rowcell {
padding: 2px 8px 3px;
&:not(.e-editedbatchcell):not(.e-updatedtd) {
color: var(--rs-text-color);
font-family: Arial;
font-size: var(--rs-grid-row-cell-font-size);
font-weight: 400;
line-height: 23px;
}
}
`
- how to custom variables
in variables.scss,we have defined some default variables, you can define your own variables in your component.
`html
// xxxx.component.html
`
`scss
// xxxx.component.scss
.my-grid-1 {
--rs-grid-row-cell-font-size: 15px;
}
.my-grid-2 {
--rs-grid-row-cell-font-size: 12px;
}
``