Change a HTML element in app.component dynamically

Question

I have implemented angular2 routing and its working perfect. Then i got this crazy thought and couldn't find a solution for that.

Question: I have an app.component.html page with a navbar and a jumbotron bootstrap element. The navbar has two links, one for home page, and the other for settings page. I need to change the jumbotron element to display "You are in Home page" from the HomeComponent variable when home link is clicked and display "You are in Settings page" from the SettingsComponent variable, when settings link is clicked. I know its possible but don't know how.

Visual Representation:

Here is my snippet:

app.component.html

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Darth</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a [routerLink]="['']" [routerLinkActive]="['active']">Home</a></li>
                <li><a [routerLink]="['settings']" [routerLinkActive]="['active']">Settings</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="jumbotron">
  <h1>Hello, world!</h1>
</div>

<div class="container-fluid">
  <router-outlet></router-outlet>
</div>

Any advice would be helpful. Thank you.

I have uploaded the entire project in my github repo here

I'm not sure I understand the problem but you can always use a shared service that holds the status and use `*ngIf` to show/hide something depending on that state. See also https://angular.io/docs/ts/latest/cookbook/component-communication.html — Günter Zöchbauer, Oct 30 '16 at 17:10

score 2 · Accepted Answer · edited May 23 '17 at 12:02

Edit: The proper way of doing it is to use services as outlined in "components communication through <router-outlet>"

One simple but not-so-clean way of doing it is to detect url changes by listening on router events.

You component code becomes

import { Component } from '@angular/core';
import {Router, NavigationEnd} from "@angular/router";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  currentMessage:string = "Hello, World";
  constructor(private activeRoute:Router) {

  }
  ngOnInit() {
    this.activeRoute.events.subscribe(this.onUrlChange.bind(this))
  }

  onUrlChange(ev) {
    if(ev instanceof NavigationEnd) {
      let url = ev.url;
      if(url.indexOf('settings') != -1)  {
          this.currentMessage = "Settings";
      } else {
        this.currentMessage = "Home";
      }

    }
  }
}

And you modify your jumptron to read the "currentMessage" variable

<div class="jumbotron">
  <h1>{{currentMessage}}</h1>
</div>

Thank you @MostafaAbdelraouf. Both the techniques worked great. But as you said, I prefered the shared service way for component communication. — Darth Ionic, Oct 31 '16 at 04:48

Change a HTML element in app.component dynamically

1 Answers1

Linked