Ngx-navigation-with-data NPM

Angular 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 PROJECT_NAME --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

First you need to import the NgxNavigationWithDataComponent class in you app.module.ts
Define some path in app-routing.module.ts file
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