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.
Clone the above mentioned repository and run the commands below:
npm install
npm run start
You don't need anything special to use Webix with Angular.
This project differs from a default Angular quickstart only in two points:
a) index.html contains references to Webix files:
<script src="//cdn.webix.com/edge/webix.js"></script>
<link rel="stylesheet" href="//cdn.webix.com/edge/webix.css">
b) typings.json has Webix typings added:
npm run typings install df~webix --save --global
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 } from '@angular/core';
@Component({
selector: 'datatable',
template:""
})
export class DataTableComponent implements OnDestroy, OnInit {
private ui : webix.ui.datatable;
constructor(root: ElementRef) {
this.ui = <webix.ui.datatable> webix.ui({
container: 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.
A Webix widget can load data directly from the server side, i.e. doesn't require any data providers.
If necessary, you can use the @Input attributes 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
constructor(private films: FilmService, root: ElementRef) {
this.ui = <webix.ui.datatable> webix.ui({
container: root.nativeElement,
view:"datatable", autoConfig:true, data: this.films.getFilms()
})
}
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" });
}
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;
@Output() onRowSelect = new EventEmitter<Film>();
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) => this.onRowSelect.emit(this.ui.getItem(id))
}
})
}
}
The above code registers a public event "onRowSelect" for the DataTable component. This event will fire each time a row is selected in the Datatable.
You can handle it in the parent component like this:
@Component({
selector: 'html-layout',
template: `<h2>Initializing Webix component in separate HTML containers</h2>
<datatable (onRowSelect)="fillInfo($event)" class='pagebox'></datatable>
<div *ngIf="selectedFilm">
<h3> Selected Film </h3>
<ul>
<li> Title : Film.title </li>
<li> Votes : Film.votes </li>
</ul>
</div>
`
})
export class HTMLLayoutComponent {
private selectedFilm: Film;
fillInfo(film : Film){
this.selectedFilm = film;
}
}
Here the parent component listens to the onRowSelect 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.
There are two ways of using Webix layouts with Angular 2. 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;
constructor(private films: FilmService, root: ElementRef) {
this.ui = <webix.ui.layout> webix.ui({
container: 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 you can use Webix layouts, but their behaviour will differ from that of 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:
<rows type="space" class="pagebox">
<cell><toolbar (onButton)="buttonClick($event)">></toolbar></cell>
<cell>
<columns type="wide">
<cell width="300"><sidebar></sidebar></cell>
<cell><datatable></datatable></cell>
</columns>
</cell>
</rows>
The rows and cols tags support type, padding and margin attributes (similar to Webix layouts).
The cell tag supports the width,height, minWidth, minHeight, maxWidth, maxHeight and gravity attributes similar to the Webix sizing attributes.
There is no way to define 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: 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])
}
})
Webix Layouts are not compatible with ngIf and any other DOM mutation directives.
If you are creating a project with the help of Angular CLI tool, be sure to add webix into src/tsconfig.app.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": [ "webix" ]
}
}
You can check the Angular CLI branch of the above mentioned repo which contains the same demo app created with the CLI tool.
Back to top