Welcome!

Agile Computing Authors: Pat Romanski, Liz McMillan, Yeshim Deniz, Elizabeth White, Corey Roth

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

@ThingsExpo Stories
Digital Transformation is much more than a buzzword. The radical shift to digital mechanisms for almost every process is evident across all industries and verticals. This is often especially true in financial services, where the legacy environment is many times unable to keep up with the rapidly shifting demands of the consumer. The constant pressure to provide complete, omnichannel delivery of customer-facing solutions to meet both regulatory and customer demands is putting enormous pressure on...
Dion Hinchcliffe is an internationally recognized digital expert, bestselling book author, frequent keynote speaker, analyst, futurist, and transformation expert based in Washington, DC. He is currently Chief Strategy Officer at the industry-leading digital strategy and online community solutions firm, 7Summits.
IoT is at the core or many Digital Transformation initiatives with the goal of re-inventing a company's business model. We all agree that collecting relevant IoT data will result in massive amounts of data needing to be stored. However, with the rapid development of IoT devices and ongoing business model transformation, we are not able to predict the volume and growth of IoT data. And with the lack of IoT history, traditional methods of IT and infrastructure planning based on the past do not app...
"Akvelon is a software development company and we also provide consultancy services to folks who are looking to scale or accelerate their engineering roadmaps," explained Jeremiah Mothersell, Marketing Manager at Akvelon, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
DXWorldEXPO LLC, the producer of the world's most influential technology conferences and trade shows has announced the 22nd International CloudEXPO | DXWorldEXPO "Early Bird Registration" is now open. Register for Full Conference "Gold Pass" ▸ Here (Expo Hall ▸ Here)
More and more brands have jumped on the IoT bandwagon. We have an excess of wearables – activity trackers, smartwatches, smart glasses and sneakers, and more that track seemingly endless datapoints. However, most consumers have no idea what “IoT” means. Creating more wearables that track data shouldn't be the aim of brands; delivering meaningful, tangible relevance to their users should be. We're in a period in which the IoT pendulum is still swinging. Initially, it swung toward "smart for smart...
IoT is rapidly becoming mainstream as more and more investments are made into the platforms and technology. As this movement continues to expand and gain momentum it creates a massive wall of noise that can be difficult to sift through. Unfortunately, this inevitably makes IoT less approachable for people to get started with and can hamper efforts to integrate this key technology into your own portfolio. There are so many connected products already in place today with many hundreds more on the h...
Here are the Top 20 Twitter Influencers of the month as determined by the Kcore algorithm, in a range of current topics of interest from #IoT to #DeepLearning. To run a real-time search of a given term in our website and see the current top influencers, click on the topic name. Among the top 20 IoT influencers, ThingsEXPO ranked #14 and CloudEXPO ranked #17.
Join IBM November 1 at 21st Cloud Expo at the Santa Clara Convention Center in Santa Clara, CA, and learn how IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Cognitive analysis impacts today’s systems with unparalleled ability that were previously available only to manned, back-end operations. Thanks to cloud processing, IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Imagine a robot vacuum that becomes your personal assistant tha...
As data explodes in quantity, importance and from new sources, the need for managing and protecting data residing across physical, virtual, and cloud environments grow with it. Managing data includes protecting it, indexing and classifying it for true, long-term management, compliance and E-Discovery. Commvault can ensure this with a single pane of glass solution – whether in a private cloud, a Service Provider delivered public cloud or a hybrid cloud environment – across the heterogeneous enter...
The Jevons Paradox suggests that when technological advances increase efficiency of a resource, it results in an overall increase in consumption. Writing on the increased use of coal as a result of technological improvements, 19th-century economist William Stanley Jevons found that these improvements led to the development of new ways to utilize coal. In his session at 19th Cloud Expo, Mark Thiele, Chief Strategy Officer for Apcera, compared the Jevons Paradox to modern-day enterprise IT, examin...
DXWorldEXPO LLC announced today that ICC-USA, a computer systems integrator and server manufacturing company focused on developing products and product appliances, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City. ICC is a computer systems integrator and server manufacturing company focused on developing products and product appliances to meet a wide range of ...
Major trends and emerging technologies – from virtual reality and IoT, to Big Data and algorithms – are helping organizations innovate in the digital era. However, to create real business value, IT must think beyond the ‘what’ of digital transformation to the ‘how’ to harness emerging trends, innovation and disruption. Architecture is the key that underpins and ties all these efforts together. In the digital age, it’s important to invest in architecture, extend the enterprise footprint to the cl...
DXWorldEXPO LLC announced today that All in Mobile, a mobile app development company from Poland, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. All In Mobile is a mobile app development company from Poland. Since 2014, they maintain passion for developing mobile applications for enterprises and startups worldwide.
In an era of historic innovation fueled by unprecedented access to data and technology, the low cost and risk of entering new markets has leveled the playing field for business. Today, any ambitious innovator can easily introduce a new application or product that can reinvent business models and transform the client experience. In their Day 2 Keynote at 19th Cloud Expo, Mercer Rowe, IBM Vice President of Strategic Alliances, and Raejeanne Skillern, Intel Vice President of Data Center Group and ...
"We are a well-established player in the application life cycle management market and we also have a very strong version control product," stated Flint Brenton, CEO of CollabNet,, in this SYS-CON.tv interview at 18th Cloud Expo at the Javits Center in New York City, NY.
In his session at @ThingsExpo, Arvind Radhakrishnen discussed how IoT offers new business models in banking and financial services organizations with the capability to revolutionize products, payments, channels, business processes and asset management built on strong architectural foundation. The following topics were covered: How IoT stands to impact various business parameters including customer experience, cost and risk management within BFS organizations.
While the focus and objectives of IoT initiatives are many and diverse, they all share a few common attributes, and one of those is the network. Commonly, that network includes the Internet, over which there isn't any real control for performance and availability. Or is there? The current state of the art for Big Data analytics, as applied to network telemetry, offers new opportunities for improving and assuring operational integrity. In his session at @ThingsExpo, Jim Frey, Vice President of S...
With the introduction of IoT and Smart Living in every aspect of our lives, one question has become relevant: What are the security implications? To answer this, first we have to look and explore the security models of the technologies that IoT is founded upon. In his session at @ThingsExpo, Nevi Kaja, a Research Engineer at Ford Motor Company, discussed some of the security challenges of the IoT infrastructure and related how these aspects impact Smart Living. The material was delivered interac...
Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settlement products to hedge funds and investment banks. After, he co-founded a revenue cycle management company where he learned about Bitcoin and eventually Ethereal. Andrew's role at ConsenSys Enterprise is a mul...