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

  // 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.

  // 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

  // xxx.modules.ts
  
  import { RaiseCommonLibModule } from "raise-common-lib";
  @NgModule({
    imports: [RaiseCommonLibModule]
  })

  import service

  // 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:

  :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.

  @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.

    // xxxx.component.html
    <div class="my-grid-1">
        <rs-common-grid>
        </rs-common-grid>
    </div>
    <div class="my-grid-2" >
        <rs-common-grid>
        </rs-common-grid>
    </div>

  // xxxx.component.scss
  .my-grid-1 {
    --rs-grid-row-cell-font-size: 15px;
  }
  .my-grid-2 {
    --rs-grid-row-cell-font-size: 12px;
  }