Webix UI in Angular 8: quick example of how to init a datatable and a related window in the Angular view

datatable.component.example.md

The original code is at https://github.com/webix-hub/angular2-demo/blob/master/src/app/components/datatable.component.ts

import { Component, Input, ElementRef, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core';
import { FilmService } from '../film.service';
import { Film } from '../film';

@Component({
  selector: 'datatable',
  template:"",
  providers: [FilmService]
})
export class DataTableComponent implements OnDestroy, OnInit {
  private ui : webix.ui.datatable;
  private win : webix.ui.window;
  private form : webix.ui.form;

  constructor(private films: FilmService, root: ElementRef) {
        this.ui = <webix.ui.datatable> webix.ui({
            container: root.nativeElement,
            view:"datatable", autoConfig:true, data: this.films.getFilms(),
            on:{
              onAfterSelect: (id) => {
                const item = this.ui.getItem(id);
                this.form.setValues(item);
                this.win.show();
              }
            }
        })
    }

    addRow(){
      this.ui.add({ title:"New row" });
    }
    updateFilm(film: Film){
      this.ui.updateItem(film.id, film);
    }
    ngOnInit(){
      this.ui.resize();
      // init window
      this.win = <webix.ui.window> webix.ui({
        view: "window",
        id: "myWin",
        head: "Test",
        close: true,
        position: "center",
        body: {
          view: "form",
          id: "myForm",
          elements: [
            { view: "text", name:"title", label: "Edit title"},
            {
              view: "button", value: "Apply",
              click: () => {
                this.updateFilm( this.form.getValues() );
              }
            }
          ]
        }
      });
      // init form
      // type is predefined, so we can just get a body of the ui.window
      this.form = this.win.getBody();
      // or this.form = <webix.ui.form> webix.$$("myForm");
    }
    ngOnDestroy(){
      this.ui.destructor();
      this.win.destructor();
    }
}