CODEWITHSUNDEEP
javascriptangularcomponents
mr.incredible
mr.incredible

Reputation: 4185

change data on route event in Angular

How to change data in one component relatively to others on route event in Angular?

For e.g. if I have three components: "nav.component", "about.component" and "service.component".

So I want to display different text in "nav.component" when I switch between about and service pages in my app.

My "app.router.ts" file:

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

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServiceComponent } from './service/service.component';

export const router: Routes = [
    { path: '', redirectTo: 'about', pathMatch: 'full' },
    { path: 'about', component: AboutComponent },
    { path: 'service', component: ServiceComponent }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

I don't want to display just page name text in my nav bar while switching between these pages, it would be a custom text for each component. Also I would like to store this data/text directly in "about.component.ts" and "service.component.ts" but not in the "app.router.ts" due to maintainability and scalability.

Is it possible?

U.P.D.

This is my "app.component.html" file:

<div class="container">

  <!-- Nav Bar (text changes here) -->
  <app-nav></app-nav>

  <!-- Pages (components which are included in app.router.ts) -->
  <router-outlet></router-outlet>

</div>

For e.g. this is "about.component.ts" file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})
export class AboutComponent implements OnInit {
  const text_for_nav_bar = "This is my new About page."; // <-- text that should be displayed in nav component for this page on router event.

  constructor() { }

  ngOnInit() {
  }

}

Upvotes: 1

Views: 975

Answers (3)

Vincent Verrier
Vincent Verrier

Reputation: 241

You should use router datas

export const router: Routes = [
    { path: '', redirectTo: 'about', pathMatch: 'full' },
    { path: 'about', component: AboutComponent, data: {navigationText: 'Some text'} },
    { path: 'service', component: ServiceComponent, data: {navigationText: 'Some other text'} }
];

and in app.component.html

<div class="container">

    <app-nav text="outlet.activatedRouteData.navigationText"></app-nav>

    <router-outlet #outlet="outlet"></router-outlet>

</div>

Of course you need to add a "@Input text: string" property in nav.component.ts

Upvotes: 0

Shabbir Dhangot
Shabbir Dhangot

Reputation: 9121

Using below code you will able to subscribe router change events. You need to add this code on nav bar.

Import router and Navigation start

import { Router, ActivatedRoute, NavigationStart } from '@angular/router';
import "rxjs/add/operator/filter";
import "rxjs/add/operator/pairwise";

Add below code in constrictor.

this.router.events
  .filter(event => event instanceof NavigationStart)
  .pairwise()
  .subscribe((value: [NavigationStart, NavigationStart]) => {
     let nextUrl = value[1].url;
     if (nextUrl == '/about') {
         // your code here for next url
     }
  },
    (err) => {

    },
    () => { });
}

});

Upvotes: 1

Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

One way would be with *ngIf (or [hidden] if you want to load all contents to the DOM at once). And to catch current route, inject Router module:

class NavComponent {
    constructor(private router: Router){

    }
}

and in nav.component.html:

<div *ngIf="router.url === '/some/route'">
 text for this route
</div>
<div *ngIf="router.url === '/other/route'">
 text for other route
</div>

Doing same in component.ts, could be:

nav.component.html:

<h1>{{yourText}}</h1>

component.ts:

ngOnInit() {
  if(this.router.url == '/some/route') {
    yourText = 'Text'
  } elseif(this.router.url == '/other/route') {
    yourText = 'Other text'
  }
}

Upvotes: 1

Related Questions