DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Securing Your Software Supply Chain with JFrog and Azure
Register Today

Trending

  • Top 10 Pillars of Zero Trust Networks
  • DevOps in Legacy Systems
  • Unlocking Game Development: A Review of ‘Learning C# By Developing Games With Unity'
  • Microservices With Apache Camel and Quarkus (Part 3)

Trending

  • Top 10 Pillars of Zero Trust Networks
  • DevOps in Legacy Systems
  • Unlocking Game Development: A Review of ‘Learning C# By Developing Games With Unity'
  • Microservices With Apache Camel and Quarkus (Part 3)
  1. DZone
  2. Data Engineering
  3. Data
  4. Data Wrangling With Angular 2 and DreamFactory

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.

Andy Rai user avatar by
Andy Rai
·
Jul. 01, 16 · Tutorial
Like (1)
Save
Tweet
Share
2.74K Views

Join the DZone community and get the full member experience.

Join For Free

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.

Data (computing) AngularJS Data wrangling Database

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

Opinions expressed by DZone contributors are their own.

Trending

  • Top 10 Pillars of Zero Trust Networks
  • DevOps in Legacy Systems
  • Unlocking Game Development: A Review of ‘Learning C# By Developing Games With Unity'
  • Microservices With Apache Camel and Quarkus (Part 3)

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: