Welcome!

Agile Computing Authors: Pat Romanski, Liz McMillan, Yeshim Deniz, Elizabeth White, Andy Thurai

Related Topics: Java IoT, Agile Computing, @ThingsExpo

Java IoT: Blog Feed Post

Angular 2: Passing Data to Routes By @YFain | @ThingsExpo #IoT

Angular offers a directive RouteParams so a route can receive data from the parent component

In the previous blog I did a high-level overview of Angular 2 router and wrote a basic routing application that demonstrated displaying different components in a predefined area of the window. We often need not only display a component, but also pass some data to it.

For example, if we navigate from the Home to the Product Detail route we need to pass the product ID to the destination route. Angular offers a directive RouteParams so a route can receive data from the parent component. There is also a RouteData directive that can be used to pass additional data to a route from the @RouteConfig section. I’ll illustrate the use of both directives by modifying the app from the previous blog.

Using RouteParams
When the user navigates to the ProductDetail route, we need to pass the product ID to display details of the particular product. Let’s modify the code so the RootComponent can pass the product ID to ProductDetailComponent. The new version of this component will be called ProductDetailComponentParam and it’ll use the directive RouteParams:

import {Component} from 'angular2/angular2';
import {RouteParams} from 'angular2/router';

@Component({
selector: 'product',
template: `<h1 class="product">Product Detail for Product: {{productID}}</h1>` , // 1
styles: ['.product {background: cyan}']})
export class ProductDetailComponentParam {
productID: string;
constructor(params: RouteParams) { // 2
this.productID = params.get('id'); // 3
}

  1. Display the received product ID using binding.
  2. The constructor of this component requests Angular to inject the object RouteParams, which contains all parameters that are passed to this component. In TypeScript you just need to declare the argument specifying its type, and Angular will know how to instantiate and inject this object. We’ll cover dependency injection in details in Chapter 5.
  3. Get the value of the parameter named id and assign it to the class variable productID, which is used in template via binding.

Now let’s see how we can change @RouteConfig and router-link to ensure that the value of the product ID will be passed to the component ProdutDetailComponentParam if the user choses to go this route. We’ll do the changes in the file main.ts:

import 'reflect-metadata';
import 'zone.js'; // 1

import {Component, bootstrap, provide} from 'angular2/angular2';
import {HomeComponent} from './components/home'; // 2
import {ProductDetailComponentParam} from "./components/product_param";

import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS,
LocationStrategy, HashLocationStrategy} from 'angular2/router';

@Component({
selector: 'basic-routing',
template: `<a [router-link]="['/Home']">Home</a>
<a [router-link]="['/ProductDetail', {id: 1234}]">Product Details</a> // 3
<router-outlet></router-outlet>`,
directives: [ROUTER_DIRECTIVES]})
@RouteConfig([
{path: '/', component: HomeComponent, as: 'Home'},
{path: '/product/:id', component: ProductDetailComponentParam, as: 'ProductDetail' }]) // 4
class RootComponent {}

bootstrap(RootComponent, [ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})]);

  1. Angular asynchronously modifies the values of properties participated in binding. In our case, after the user choses to open the product detail component, the value of the variable productID changes and its bindings need to be updated. The library zone.js will automatically sync up all the bindings and watchers in the entire component tree of the application.
  2. I kept my components in the _components_ directory and need import them from there.
  3. This time there are two elements in the array given to router-link. The first one is the name of the route and the second is a JavaScript object containing a name/value pair that represents the parameter to be passed to the /ProductDetail route. For simplicity we’ve hardcoded the id to be 1234, but if we had a variable product pointing to the corresponding object, we could have written {id: product.id} here.
  4. The path property has an additional fragment /:id. The name of this URL fragment must match the name of the parameter property used in router-link. Angular will construct the URL fragment /product/1234 for this ProductDetail route. Note that we still use the same route name in router-link even though it points not to the ProductDetailComponent but to ProductDetailComponentParam.

The following screenshot shows how the product detail view will be rendered in the browser:

ch4_basic_routing_product_detail_param

Note the URL. Angular router replaced the path /product/:id with /product/1234.

Let’s overview the steps that Angular did under the hood for rendering the main page of the application:

  1. Check the the content of each router-link to find the corresponding routes configurations.
  2. Modify the URL fragments the parameters with actual values where specified.
  3. Build the actual <a href=””> tags that the browser understands.

The next screenshot shows a snapshot of the home page of our application with the Chrome Dev Tools panel open.

ch4_basic_routing_product_detail_href

Since the path property of the Home route contains just the slash, Angular simply removed it – a single slash base URL of the page. But the anchor under Product Details link is already converted into a regular HTML tag. When the user will click on the Product Details link, the router will attach a hash sign and add /product/1234 to the base URL so the absolute URL of the Product Detail view will become http://localhost:8080/#/product/1234.

Using RouteData
While most of the times parent components will be passing data to their children, Angular also offers a mechanism to pass additional data to components at the time of the route configuration. For example, besides the data that a component needs for implementing application logic, we may need to pass a flag indicating if the application runs in production environment or not. This can be done by using the data property of the @RouteConfig annotation. For example, our ProductDetail route can be configured as follows:

@RouteConfig([
{path: '/product/:id', component: ProductDetailComponentParam,
as: 'ProductDetail', data: {isProd: true}}])

Accordingly, the constructor of the ProductDetailComponent will need an extra argument of type RouteData:

export class ProductDetailComponentParam {
productID: string;
constructor(params: RouteParams, data: RouteData) {
this.productID = params.get('id');

console.log(`Is this prod environment: ${data.get('isProd')}`);
}
}

Passing data to a route with RouteData is not an alternative to RouteParams. While RouteParams is used to pass the data from one route to another using based on the user’s selections (e.g., show details of the selected product), RouteData can come handy when you need to pass some data to a route during the configuration phase, e.g. is it a production or QE environment, should the user have administrator’s privileges, or what URL of use for the product service.

To see this application in action follow this plank and press the button Run. For simplicity, all the code is located in one file main.ts. Also, I imported the dev version of Angular in the index.html that includes such libraries as zone.js and reflect-metadata, so there is no need to import them separately.

Stay tuned for more Angular 2 blogs. My other Angular-related blogs are here . Manning started publishing drafts of our book “Angular 2 Development with TypeScript“.

Read the original blog entry...

More Stories By Yakov Fain

Yakov Fain is a Java Champion and a co-founder of the IT consultancy Farata Systems and the product company SuranceBay. He wrote a thousand blogs (http://yakovfain.com) and several books about software development. Yakov authored and co-authored such books as "Angular 2 Development with TypeScript", "Java 24-Hour Trainer", and "Enterprise Web Development". His Twitter tag is @yfain

IoT & Smart Cities Stories
All in Mobile is a place where we continually maximize their impact by fostering understanding, empathy, insights, creativity and joy. They believe that a truly useful and desirable mobile app doesn't need the brightest idea or the most advanced technology. A great product begins with understanding people. It's easy to think that customers will love your app, but can you justify it? They make sure your final app is something that users truly want and need. The only way to do this is by ...
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...
Dynatrace is an application performance management software company with products for the information technology departments and digital business owners of medium and large businesses. Building the Future of Monitoring with Artificial Intelligence. Today we can collect lots and lots of performance data. We build beautiful dashboards and even have fancy query languages to access and transform the data. Still performance data is a secret language only a couple of people understand. The more busine...
The challenges of aggregating data from consumer-oriented devices, such as wearable technologies and smart thermostats, are fairly well-understood. However, there are a new set of challenges for IoT devices that generate megabytes or gigabytes of data per second. Certainly, the infrastructure will have to change, as those volumes of data will likely overwhelm the available bandwidth for aggregating the data into a central repository. Ochandarena discusses a whole new way to think about your next...
CloudEXPO | DevOpsSUMMIT | DXWorldEXPO are the world's most influential, independent events where Cloud Computing was coined and where technology buyers and vendors meet to experience and discuss the big picture of Digital Transformation and all of the strategies, tactics, and tools they need to realize their goals. Sponsors of DXWorldEXPO | CloudEXPO benefit from unmatched branding, profile building and lead generation opportunities.
DXWorldEXPO LLC announced today that Big Data Federation to Exhibit at the 22nd International CloudEXPO, colocated with DevOpsSUMMIT and DXWorldEXPO, November 12-13, 2018 in New York City. Big Data Federation, Inc. develops and applies artificial intelligence to predict financial and economic events that matter. The company uncovers patterns and precise drivers of performance and outcomes with the aid of machine-learning algorithms, big data, and fundamental analysis. Their products are deployed...
Cell networks have the advantage of long-range communications, reaching an estimated 90% of the world. But cell networks such as 2G, 3G and LTE consume lots of power and were designed for connecting people. They are not optimized for low- or battery-powered devices or for IoT applications with infrequently transmitted data. Cell IoT modules that support narrow-band IoT and 4G cell networks will enable cell connectivity, device management, and app enablement for low-power wide-area network IoT. B...
The hierarchical architecture that distributes "compute" within the network specially at the edge can enable new services by harnessing emerging technologies. But Edge-Compute comes at increased cost that needs to be managed and potentially augmented by creative architecture solutions as there will always a catching-up with the capacity demands. Processing power in smartphones has enhanced YoY and there is increasingly spare compute capacity that can be potentially pooled. Uber has successfully ...
SYS-CON Events announced today that CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5–7, 2018, at the Javits Center in New York City, NY. CrowdReviews.com is a transparent online platform for determining which products and services are the best based on the opinion of the crowd. The crowd consists of Internet users that have experienced products and services first-hand and have an interest in letting other potential buye...
When talking IoT we often focus on the devices, the sensors, the hardware itself. The new smart appliances, the new smart or self-driving cars (which are amalgamations of many ‘things'). When we are looking at the world of IoT, we should take a step back, look at the big picture. What value are these devices providing. IoT is not about the devices, its about the data consumed and generated. The devices are tools, mechanisms, conduits. This paper discusses the considerations when dealing with the...