How to use ng-devui - 8 common examples

onFinishCellEdit($event?: Event) {
    if (this.editModel !== 'cell') {
      return;
    }
    this.ngZone.run(() => {
      this.isCellEdit = false;
    });

    // tslint:disable-next-line:no-unused-expression
    this.documentClickSubscription && this.unSubscription(this.documentClickSubscription);
    // tslint:disable-next-line:no-unused-expression
    this.cellEditorClickSubscription && this.unSubscription(this.cellEditorClickSubscription);
    stopPropagationIfExist($event);

    this.dt.onCellEditEnd({
      rowIndex: this.rowIndex,
      colIndex: this.colIndex,
      column: this.column,
      rowItem: this.rowItem,
      cellComponent: this,
      rowComponent: this.rowComponent
    });
  }

stopPropagation($event: Event) {
    stopPropagationIfExist($event);
  }

constructor(private elementRef: ElementRef, private viewContainerRef: ViewContainerRef,
              private componentFactoryResolver: ComponentFactoryResolver, private renderer2: Renderer2,
              private injector: Injector, private devUIConfig: DevUIConfig, private i18n: I18nService,
              private builder: AnimationBuilder) {
    this._dateConfig = devUIConfig[`datePicker${i18n.getLangSuffix()}`];
    this.dateConverter = devUIConfig[`datePicker${i18n.getLangSuffix()}`].dateConverter || new DefaultDateConverter();
    this.selectedDate = null;
    const factory = this.componentFactoryResolver.resolveComponentFactory(DatepickerComponent);
    this.cmpRef = this.viewContainerRef.createComponent(factory, this.viewContainerRef.length, this.injector);
    this.i18n.getMessage().subscribe((lang) => {
      const langSuffix = lang === 'zh-CN' ? 'CN' : 'EN';
      this._dateConfig = devUIConfig[`datePicker${langSuffix}`];
    });
  }

constructor(
    protected elementRef: ElementRef,
    protected renderer2: Renderer2,
    protected devUIConfig: DevUIConfig,
    protected changeDetectorRef: ChangeDetectorRef,
    protected i18n: I18nService
  ) {
    this._dateConfig = this.devUIConfig[`datePicker${i18n.getLangSuffix()}`];
    this.dateConverter = this.devUIConfig[`datePicker${i18n.getLangSuffix()}`].dateConverter || new DefaultDateConverter();
    this.renderer2.setStyle(this.elementRef.nativeElement, 'display', 'inline-block');
  }

transform(date: any, pattern: any): any {
    if (!date) {
      return;
    }
    return formatDate(date, pattern);
  }
}

date(item) {
    let pattern;
    if (this.extraOptions && this.extraOptions.dateFormat) {
      pattern = this.extraOptions.dateFormat;
    } else {
      pattern = this.extraOptions && this.extraOptions.showTime ?
      this.devUIConfig.datePickerCN.format.time : this.devUIConfig.datePickerCN.format.date;
    }

    return item ? formatDate(new Date(item), pattern) : '';
  }
  emitFilterData(filterData) {

{name: 'typescript', func: typescript},
    {name: 'scss', func: scss},
    {name: 'html', func: xml}
  ];
}

@NgModule({
  declarations: [
    ExamplePanelComponent,
    AppContentComponent,
    GetStartedComponent
  ],
  imports: [
    AccordionModule,
    CommonModule,
    DevUIModule.forRoot(),
    RouterModule.forChild([
      {
          path: '',
          component: AppContentComponent,
          data: {},
          children: routesConfig
      },
    ]),
  ]
})
export class AppContentModule {
  constructor() {}
}

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { DevUIModule } from 'ng-devui/devui.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DevUIModule.forRoot(),
    RouterModule.forRoot(
      [
        {
          path: '',
          redirectTo: 'components',
          pathMatch: 'full'
        },
        {
          path: 'components',
          loadChildren: './component/app-content.module#AppContentModule'
        },
        {
          path: '**',
          redirectTo: 'components'
        }
      ]