Angular Integration

The Webix library is compatible with the Angular (Angular 2+) framework. Integration with earlier versions can be found in this article.

You can find an example of using Webix with Angular on GitHub. To learn more about importing Webix Complex Widgets into an Angular App, check out this repository.

Running the Demo

Clone the above mentioned repository and run the commands below:

npm install
npm run start

Included Files

Webix files are included via the scripts and styles options of angular.json as in:

"styles": [
  "src/styles.css",
  "node_modules/webix/webix.css"
],
"scripts": [
  "node_modules/webix/webix.js"
]

If you are creating a new project with the help of the Angular CLI tool, make sure to add webix typings into tsconfig.json as follows:

"include": [
    "src/**/*.ts",
    "./node_modules/webix/types/webix.global.d.ts"
]

Webix-based Components

When you need to create a Webix-based view, just create a normal Angular component with webix.ui call inside.

import { Component, ElementRef, OnDestroy, OnInit, inject } from '@angular/core';
 
@Component({
    selector: 'webix-datatable',
    template:''
})
export class DataTableComponent implements OnDestroy, OnInit {
    private ui : webix.ui.datatable;
    private root = inject(ElementRef);
 
    constructor(){
        this.ui = <webix.ui.datatable> webix.ui({
            container: this.root.nativeElement
            view:"datatable", autoConfig:true, url:"data.php"
        })
    }
 
    ngOnInit(){
      this.ui.resize();
    }
    ngOnDestroy(){
      this.ui.destructor();
    }
}

The webix.ui call inside of the class constructor initializes a Webix view. You can use any Webix component and options here. A single Angular component can host a single Webix widget or a layout with multiple Webix widgets.

The ngOnInit handler is used to resize a component to the parent container size (it is not necessary if you use fixed sizes in the webix.ui config)

The ngOnDestroy is used to clean the memory after the view is disposed of.

Loading Data into Webix Component

A Webix component can load data directly from the server side. So, the component can work without data providers' infrastructure.

If necessary, you can use the Angular input function or data services to provide data for the component, the same as for normal Angular components. In both cases, the data must be set through the "data" property of the component. This way of data setting supports both raw data objects and promises of data objects.

app/services/film.ts

@Injectable()
export class FilmService {
    getFilms(): Promise<Film[]>{
        return Promise.resolve(FILMS);
    }
}

app/components/datatable.ts

private root = inject(ElementRef);
private films = inject(FilmService);
constructor(){
    this.ui = <webix.ui.datatable> webix.ui({
        container: this.root.nativeElement,
        view:"datatable", autoConfig:true, data: this.films.getFilms()
    })
}

Calling API of Webix Components

You can add a public method to the component to call any necessary public method by using this.ui as a reference to the Webix object:

app/components/datatable.js

addRow(){
    this.ui.add({ title:"New row" });
}

Handling Webix Events

You can expose events of Webix component through the output property:

app/components/datatable.js

export class DataTableComponent implements OnDestroy, OnInit {
  private ui : webix.ui.datatable;
  private root = inject(ElementRef);
  private films = inject(FilmService);
  readonly rowSelect = output<Film>();
 
  constructor(){
    this.ui = <webix.ui.datatable> webix.ui({
      container: this.root.nativeElement,
      view:"datatable", autoConfig:true, data: this.films.getFilms(),
      on:{
       onAfterSelect: (selection) => this.rowSelect.emit(this.ui.getItem(selection.id))
      }
    })
  }
}

The above code registers a public event "rowSelect" for the DataTable component. This event will fire each time when a row is selected in the Webix component.

You can handle it in the parent component like this:

@Component({
 selector: 'webix-html-layout',
 template: `<h2>Initializing Webix component in separate HTML containers</h2>
     <webix-datatable (rowSelect)="fillInfo($event)" class='pagebox'></webix-datatable>
     <div *ngIf="selectedFilm">
        <h3> Selected Film </h3>
        <ul>
           <li> Title : Film.title </li>
           <li> Votes : Film.votes </li>
        </ul>
     </div>
     `
})
export class HTMLLayoutComponent {
    selectedFilm: Film;
    fillInfo(film: Film){
      this.selectedFilm = film;
    }
}

Here the parent component subscribes to the rowSelect event and shows the selected record info when it is available.

A similar approach can be used to map any other event through the output properties.

Webix Layouts

There are two ways of using Webix layouts with Angular. The recommended approach is to host all Webix layout-based components in a single Angular component:

export class MyLayoutComponent implements OnDestroy, OnInit {
  private ui : webix.ui.datatable;
  private root = inject(ElementRef);
  private films = inject(FilmService);
 
  constructor(){
    this.ui = <webix.ui.layout> webix.ui({
        container: this.root.nativeElement,
        view:"layout",
        rows:[
            some,
            other,
            { cols:[ views, here ] }
        ]
    })
  }
}

The second approach presupposes defining layouts directly as a part of the template property. It is a rather tempting way, but it can cause problems, since Webix Layouts use fixed-size concept which is not compatible with the Angular way of UI building. So while you can use Webix layouts, they will behave differently from normal Angular components (the most notable thing is that you won't be able to use ngIf to hide/show a part of layout).

With the above disclaimer in mind, you can still try to use Webix Layout from an Angular template. There are three layout components provided in the app/components/layout.ts directory:

webix-columns - creates a column layout
webix-rows - creates a row layout
webix-cell - wraps a single cell of a layout

<webix-rows type="space" class="pagebox">
  <webix-cell>
    <webix-toolbar (buttonClick)="handleButtonClick($event)"></webix-toolbar>
  </webix-cell>
  <webix-cell>
    <webix-columns type="wide">
      <webix-cell width="300"><webix-sidebar></webix-sidebar></webix-cell>
      <webix-cell><webix-datatable></webix-datatable></webix-cell>
    </webix-columns>
  </webix-cell>
</webix-rows>

The webix-columns and webix-rows tags support the type, padding and margin attributes (similar to Webix layouts).

The webix-cell tag supports the width, height, minWidth, minHeight, maxWidth, maxHeight and gravity attributes similar to the Webix sizing attributes.

Routing

There is no way to define the routerLink attributes inside Webix UI. You need to use the onItemClick event of a component, if you need to route to a different view:

this.ui = <webix.ui.menu>webix.ui({
    container: this.root.nativeElement,
    view: "menu", layout: "y", minHeight: 200, select: true,
    data: [
        { id: "html-layout", value: "HTML Layout" },
        { id: "webix-layout", value: "Webix Layout" },
        { id: "form-grid", value: "Form and Grid" }
    ],
    on: {
        onItemClick: (id) => this.router.navigate([id])
    }
})

Limitations

Webix Layouts are not compatible with ngIf and any other DOM mutation directives.