ngx-navigation-with-data

This package is for navigate with data in angular, angular 2, 3, 4, 5.
This package is for send data from one component to other in angular 2, 3, 4, 5.
This package is mainly for beginner of Angular developement.
This help you to navigate through components with some data.

Quick Start

All you need to do is one angular project.
You can create the project by open your terminal.
ng new PROJECTNAME --routing
Here routing flag will auto generate the app-routing.module.ts file where we keep our routing paths.
Install ngx-navigation-with-data
``npm i ngx-navigation-with-data --save``

Use of package

1. First you need to import the NgxNavigationWithDataComponent class in you app.module.ts
   

1. Define some path in app-routing.module.ts file
   

1. Import the NgxNavigationWithDataComponent class in your componet where you want to use this package
   

Now you can use the package's methods.

app.module.ts

``` import { NgxNavigationWithDataComponent } from "ngx-navigation-with-data"; @NgModule({ declarations:

AppComponent,

, imports:

AppRoutingModule

, providers: NgxNavigationWithDataComponent, bootstrap: AppComponent }) export class AppModule { } ```

app-routing.module.ts

``` import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; const routes: Routes = {

path:'home',

component:HomeComponent

},

{

path:'about',

component:AboutComponent

} ; @NgModule({ imports: RouterModule.forRoot(routes), exports: RouterModule }) export class AppRoutingModule { } ```

home.component.ts

``` import { Component, OnInit } from '@angular/core'; import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: './home.component.css' }) export class HomeComponent implements OnInit { constructor(public navCtrl: NgxNavigationWithDataComponent) { } ngOnInit() { } navigateToABout() { this.navCtrl.navigate('about', {name:"virendta"}); } } ```

about.component.ts

``` import { Component, OnInit } from '@angular/core'; import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data'; @Component({ selector: 'app-about', templateUrl: './about.component.html', styleUrls: './about.component.css' }) export class AboutComponent implements OnInit { constructor(public navCtrl: NgxNavigationWithDataComponent) {

console.log(this.navCtrl.get('name')); // it will console Virendra

console.log(this.navCtrl.data); // it will console whole data object here

} ngOnInit() { } } ```

Properties

• get(key) : method
  

It will return the value of data object from previous component

• data : get property
  

It will give the whole data object of previous component

• navigate(page, data) : method
  

It will navigate to the component name of page, in routing.module file, with data

Author

Source code can be found on github Developed by Virendra Yadav