RaiseCommomLib

Debugging components

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

Components development guide

- ### Component and Service
- how to writing and exporting
``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;
}
``