Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Data Wrangling With Angular 2 and DreamFactory

DZone's Guide to

Data Wrangling With Angular 2 and DreamFactory

We are all developing single page apps these days; check out how to handle your data effectively with Angular 2.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

A few days ago, 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 component can also be integrated into your other projects with an npm install and a 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. Let's call your root component 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 has 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 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 actual 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 the user selects the table in the parent component. Hence, the schema is going to be dynamic and will be passed on to the child component, filterbar. In filterbar, we have to define the @Input variables that will accept values from the parent component.

@Input() dataModel;

The parent component will pass the data like this:

<df-table>
 <filterbar [dataModel]="schema">
 </filterbar>
</df-table>

The value of the 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 the schema in the parent component df-table.

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

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
angular ,data

Published at DZone with permission of Andy Rai, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}