Integrating Vault with Angular

You can use dhtmlxVault in an application created with the Angular framework. Check the demo on Github.

Please note that the implementation provided below is not the only way to use dhtmlxVault in a Angular-based application. It gives you initial schema of the integration and implies further extension of the app functionality depending on your goals.

Including source files

To add Vault sources into a Angular-based app you need to download the component package and unpack it into a folder of your project.

Then include vault.js and vault.css files into a page. Make sure that you set correct relative paths to these files:

The source files are represented in two versions: the full version and the minified one. Make sure that you set correct relative paths to these files:

index.html

// full version
<script type="text/javascript" src="codebase/vault.js"></script>  
<link rel="stylesheet" href="codebase/vault.css">
 
// minified version
<script type="text/javascript" src="codebase/vault.min.js"></script>  
<link rel="stylesheet" href="codebase/vault.min.css">

Initialization

There are two possible scenarios of initializing Vault inside an Angular application. One consists in isolating Vault structure and data inside of the Angular component and another one suggests separating view and data parts with the possibility of interaction between them.

Scenario 1. Isolating Vault in an Angular component

In this variant Vault configuration and data are held inside of the Angular component with no bonds with the external part of the application.

Vault initialization

Create a Vault.ts file, where you will define a Component. Each component must have a template assigned, for Vault it will be a plain DIV tag with a named reference.

Vault.ts

@Component({
    template: `<div #widget class='widget-box'></div>`
})

Use the new Vault constructor to initialize Vault inside of the container that you've set above:

Vault.ts

export class VaultComponent implements OnInit, OnDestroy {
    @ViewChild('widget') container: ElementRef;
    vault: Vault;
 
    ngOnInit() {
        this.vault = new Vault(this.container.nativeElement, {
            mode: VaultMode.grid
        });
    }   
}

Loading data and changing config

Next you can load data into the Vault and change its configuration, e.g. add a new control into the toolbar:

Vault.ts

export class VaultComponent implements OnInit, OnDestroy {
    @ViewChild('widget') container: ElementRef;
    vault: Vault;
 
    ngOnInit() {
        this.vault = new Vault(this.container.nativeElement, {
            mode: VaultMode.grid
        });
 
        this.vault.data.parse([
            { name: 'myfile_12.png', size: 32420 },
            { name: 'myfile_13.png', size: 55674 },
            { name: 'myfile_14.png', size: 12440 },
            { name: 'info.doc', size: 243441 },
        ]);
 
        this.vault.toolbar.data.add({
            value: 'MyAction'
        });
    }
}

Scenario 2. Exposing Vault data and config

This variant adds flexibility in the control over Vault data and configuration by allowing access to them from other parts of the application.

Vault initialization

The first step is the same. Create a file, let it be Vault2.ts this time, and add a container for the Vault:

Vault2.ts

@Component({
    template: `<div #widget class='widget-box'></div>`
})

Then initialize Vault with the new Vault constructor and define the configuration properties of Vault in the object passed as a second parameter of the constructor:

Vault2.ts

export class VaultComponent implements OnInit, OnDestroy {
    @ViewChild('widget') container: ElementRef;
    vault: Vault;
 
    ngOnInit() {
        this.vault = new Vault(this.container.nativeElement, {
            data: this.data,
            mode: VaultMode.grid,
            uploader: {
                autosend: this.autosend,
                target: this.target
            },
            toolbar: this.toolbar
        });
    }   
}

Working with configuration options

Set the list of used Vault configuration properties and their types before the initialization function:

Vault2.ts

export class VaultComponent implements OnInit, OnDestroy {
    @ViewChild('widget') container: ElementRef;
    vault: Vault;
 
    @Input() mode: string;
    @Input() target: string;
    @Input() toolbar: boolean;
    @Input() autosend: boolean;
    @Input() data: DataCollection<IFileWrapper>;
 
    ngOnInit() {
        this.vault = new Vault(this.container.nativeElement, {
            data: this.data,
            mode: VaultMode.grid,
            uploader: {
                autosend: this.autosend,
                target: this.target
            },
            toolbar: this.toolbar
        });
    }   
}

The properties of Vault are exposed and available to work with outside the component. In the example below the "grid" mode of rendering a list of files is enabled:

BasicSample.ts

@Component({
    template: `
    <div class='app-box'>
        <app-vault mode='grid'></app-vault>
    </div>`
})

Working with data

Work with data in this variant of using Vault in an Angular application can follow the MVVM pattern. Data collection represents Model and Vault represents View. Data collection and Vault are kept separately, and communicate with each other via particular links. Any changes made in the Model (Data collection) trigger corresponding changes in the View (Vault).

Usage of the MVVM pattern allows working with data outside Vault and all data-related manipulations can be moved to a separate file.

Create a DataSample.ts file and create a new data collection named files in it:

DataSample.ts

export class VaultComponent {
  files: DataCollection;
 
  constructor() {
    this.files = new DataCollection();
  }
}

Bind the created data collection to Vault via the corresponding attribute:

DataSample.ts

<app-vault [data]=files class='base-size'></app-vault>

Due to data binding you can:

react to changes in the data

For example, by using the change event:

DataSample.ts

export class VaultComponent {
  files: DataCollection;
  count: number;
 
  constructor() {
    this.files = new DataCollection();
    this.files.events.on(DataEvents.change, () => {
      this.count = this.files.getLength();
    });
  }

make changes in the data

For example, you can add files into the Vault and clear the list by clicking the bound buttons. In the example below buttons are subscribed to the click event.

DataSample.ts

@Component({
  template: `
    <div class='app-box'>
        <input type="button" (click)="add()" value="Add a file">
        <input type="button" (click)="clear()" value="Clear all">
    </div>`
})
export class VaultComponent {
  files: DataCollection;
 
  constructor() {
    this.files = new DataCollection();
  }
  add() {
    this.files.add({ name: 'myfile.png', size: 24560 });
  }
  clear() {
    this.files.removeAll();
  }
}

A click on the "Add a file" button adds a file into the Vault and a click on the "Clear all" button cleans the list of files, as it's defined by the related methods.