Angular 2 Routing And Passing Parameters

When we plan to develop an Angaular2 application, the first thing need to be in place is a good routing module.
So the intention of this post is to help developers to design a routing mechanism for their Angular2 App.

Hope the reader have some good understanding of Angular2 basics like Module, Component, Routing etc.

We are going to develop an app that have 2 pages ‘Home’ and ‘Products’.
The Home page contain a textbox and a button. Once we enter some value in the textbox and click the button,
products page will be displayed with the value we entered in the home page.

So this post also demonstrate, how you can pass value from one component to another via routing.

Let us have a look at the UI.

Home Page

Products Page

We have 3 components in our app.

1. AppComponent (Which is our root component).
2. HomeComponent
3. ProductListComponent

Now follow these steps:

1. First let us create our Routing Module.

import { NgModule } from '@angular/core'
import { RouterModule, Routes} from '@angular/router'

import { HomeComponent } from './home.component'
import {ProductListComponent} from './product-list.component'

const routes:Routes=[
    { path:'', redirectTo:'/home', pathMatch:'full' },
    { path:'home', component:HomeComponent },
    {path:'products/:value', component:ProductListComponent}

];

@NgModule({
    imports:[RouterModule.forRoot(routes)],
    exports:[RouterModule]
})

export class AppRoutingModule{}

2. Integrate our routing module to main AppModule.

import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms'
import{AppRoutingModule} from './app-routing.module'

import {AppComponent} from './app.component'
import {HomeComponent} from './home.component'
import {ProductListComponent} from './product-list.component'

@NgModule({
    imports:[BrowserModule,FormsModule,AppRoutingModule],
    declarations:[AppComponent,HomeComponent,ProductListComponent],
    providers:[],
    bootstrap:[AppComponent]
})

export class AppModule{}

3. Add as the first child of head.

4. Define route links and outlet in our root component (AppComponent)

import { Component} from '@angular/core'

@Component({
    moduleId:module.id,
    selector:'my-app',
    template:`
    <h1>{{Title}}</h1>
    <nav>
    <a routerLink='/home'>Home</a>
    <a [routerLink]="['/products','test']">Products</a>
    </nav>
    <router-outlet></router-outlet>
    `
})

export class AppComponent{
    Title:string='Routing Demo';
}

5. Here is th code for HomeComponent

import {Component} from '@angular/core'
import {Router} from '@angular/router'
@Component({
    moduleId:module.id,
    selector:'my-home',
    templateUrl:'home.html'
})

export class HomeComponent{
    Title:string='Home';
    
    constructor(private router:Router){

    }

    Go(value:string):void{
        let link=['/products',value];
        this.router.navigate(link);
    }
  
}

6. Here is the code for home.html

<h2>{{Title}}</h2>
<input #input/>
<button (click)="Go(input.value)">Next Page</button>

7. Here is the code for ProductListComponent

import {Component,OnInit} from '@angular/core'
import{ActivatedRoute,Params} from '@angular/router'
import{Location} from '@angular/common'
@Component({
    moduleId:module.id,
    selector:'product-list',
    templateUrl:'products.html'
})

export class ProductListComponent implements OnInit{
    Title:string='Product List';
    Input:string;
    constructor(private router:ActivatedRoute,
    private location:Location){}

    ngOnInit():void{
        this.router.params.forEach((params:Params)=>{
            
            this.Input=params['value'];
          
        })
    }

    goBack():void{
        this.location.back();
    }
}

8. Here is the code for products.html

<h2>{{Title}}</h2>
<label>Passed Value is {{Input}}</label>

So you are done.

Download code from https://github.com/vivekcek/AngularCRUD

Desktop application with Angular2 and Electron in One minute

We can use Angular2 and electron to build nice desktop application for Windows/Mac/Linux.
So how to do it in a minute

1. Install visual studio code.
2. Install Node package manager.
3. Clone the code from my git hub.

https://github.com/vivekcek/angular2electron

4. Run command “npm install”
5. Run command “npm start” or debug with VS Code.
6. Please set the path in launch.json, and point to electron module.

Angular2 Development With Visual Studio Code

In this post, i will show you how we can use VS Code for Angular2 development.
The main thing is how to configure VS Code to transpile typescript to js files and lunch the app.

1. Install NodeJs
2. Install visual studio code.
3. Install TypeScript via NPM (Visual studio code may normally install TypeScript).
4. Create a folder in E, E:\Angular2
5. Open this folder through VS Code.
6. Go to https://angular.io/docs/ts/latest/quickstart.html
7. Create 3 files in VS Code , package.json, tsconfig.json, systemjs.config.js.

8. From angular site copy the codes for these files and save.

9. Go to NPM and change your directory to E:\Angular2, and issue below command

npm install

10. Now create a folder named app, and create below files (Refer angular2 quick start).

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})
export class AppComponent { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

11. So everything is ready, now important step to configure TypeScript compiler.
12. Ctrl+Shift+P will open command pallette.
13. Type task and select Configure Task Runner

14. Selecet tsconfig.json

15. This will create a file named tasks.json, update args section as shown in image (args:[])

16. Now click on build and configure launch.json file.

17. Update program section as shown.

18. Run the app now

Write ECMAScript 6 (JavaScript 6) in VS Code.

In this post i will show you how to write and debug EcmaScript6 in VS Code.

1. Install NodeJs (Check the configure path option during install).
2. Install VS Code.
3. Restart your machine/Inspect path has been set for NodeJs.
4. Start VS Code.
5. From menu select Open Folder(File->Open Folder).

6. Create a New Folder.

7. Create a new file named “jsconfig.json” and paste below code.

{
    "compilerOptions": {
        "target": "ES6"
    }
}

8. Now create a javascript file Hello.js and paste below code.

class Car {
    constructor(make) { //constructors!
        this.make = make;
      this.currentSpeed = 25;
    }

    printCurrentSpeed(){
          console.log(this.make + ' is going ' + this.currentSpeed + ' mph.');
    }
}

class RaceCar extends Car { //inheritance
    constructor(make, topSpeed) {
        super(make); //call the parent constructor with super
        this.topSpeed = topSpeed;
    }

    goFast(){
          this.currentSpeed = this.topSpeed;
    }
}

let stang = new RaceCar('Mustang', 150);

stang.printCurrentSpeed();
stang.goFast();
stang.printCurrentSpeed();

9. From menu select Debug (View->Debug).

10. Click on green start debug button, which will ask to configure the settings.
Select NodeJs

11. When we select NodeJs,VS Code will open launch.json. Update it with our file name Hello.js

12 Agin click on that Green Play button and enjoy.