Data wrangling with Angular 2 and DreamFactory

A few days I posted about using angular2-auth-component for managing logins with Angular 2 and Dreamfactory. Now we're going to focus on the new angular2-data-component, which handles data.

Background

The data service in dreamfactory allows you to manage your sql and non sql data services. You can add, edit, update or delete records using data service. Angular2-data-component is a widget which allows you to all of that using a friendly UI. This compoenent can also be integrated in your other projects with a npm install and few lines of codes.

Using the component

In order to communicate with dreamfactory console you need to embed following configuration values in your index.html in a script tag.

window.instanceUrl = '';

window.appKey = ''

These config values will be used by angular2-data-component to communicate with dreamfactory console. Then a simple npm install should download the module inside your node_modules folder after which you can include and use all the components inside angular2-data-component.

npm install angular2-data-component --save

Import the Dreamfactory Data component and necessary services. Lets call your root component as AppCmp.

import {DfDataCmp} from 'angular2-auth-component/index';
@Component({

  selector: 'app',

  templateUrl: './components/app/app.html',

  styleUrls: ['./components/app/app.css'],

  encapsulation: ViewEncapsulation.None,

  directives: [ROUTER_DIRECTIVES, DfDataCmp],

  providers: [BaseHttpService]

})

Now in your html you should be able to use the component.

 <df-data></df-data>

The data component will then be rendered in your application page.

Breakdown of the component

The component is internally made of different other components.

filterbar: to apply filter on the selected table
record: the form view for any record to craete or update
df-table: the table view for any resource
df-toolbar: Toolbar with options like previous, next, filter, pagination etc.

There is also a separate service class to handle http operations called DfService.

Each of the above mentioned components have the new Angular 2 event emitters: a better way to notify parent component about the changes. This uni-directional flow of data can be clearly seen between the components filterbar and df-table. The use case is to refresh the table every time the filter changes. Now since the filter is totally a separate component there has to be a way for filterbar to communicate the filter form data to the table component which eventually will update the results in the table. This is how you define a event emitters in the component, in this case filterbar.

@Output() apply: EventEmitter = new EventEmitter();

@Output() remove: EventEmitter = new EventEmitter();

Apply emits the filter data set by the user in the ui to parent component df-table. The actuall emitting will happen in the applyFilter function.

applyFilter() {

  if (!this.filterType || !this.filterValue) return;

  var filter = this.filterType + ' like "%' + this.filterValue + '%"';

  this.apply.next(filter);

}

The parent component will be set up with these tags.

<df-table>

 <filterbar [dataModel]="schema">

 </filterbar>

</df-table>

class DfTable {

  applyEvent(args) {

    // apply filter

  }

}

Just like we had @Output or event emitters we also have @Input which are used to pass the data from parent component to child component. Sort of like directives and scope in angular 1.x. Consider the following example of filterbar and df-table.

The use case is to set the schema when it is fetched after user selets the table in parent component. Hence the schema is going to be dynamic and will be passed on to child component, filterbar. In filterbar we have to define the @Input variables that will accept values from parent component.

@Input() dataModel;

The parent component will pass the data like this:

<df-table>

 <filterbar [dataModel]="schema">

 </filterbar>

</df-table>

The value of schema is set by the df-table component. Since the data flow is uni-directional, the change in the filterbar component won't change the value of schema in parent component df-table.

There is also a sample repository which uses these components using npm install.

Related reading:Building an AngularJS application using DreamFactory