Change color of div based on page selection in Angular 4

0
votes

new to Angular so please bear with me (or just point me to the appropriate docs article if this is just that obvious)

Basically, the structure of my site (for all of the pages) is this:

navigation (home, about, resources, contact)

header-div

content

footer

I want it so that any of the links you click will change the contents of the header-div; for now I'll start with changing the background color. For example, the home page's header is blue, about is red, resources is green, contact is yellow.

What I started doing but got stuck with was directly manipulating the style by using a method and click listener on the links

How would I got about attaching a class to the div, based on the link that's been clicked?

This is my app.component.ts

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

@Component({
  selector: 'app-root',
template: `
<div class="app-nav">
  <nav class="set-margin">
    <ul>
      <li><a routerLink="/" routerLinkActive="active" (click)="showStyle = !showStyle">Home</a></li>
      <li><a routerLink="/about" routerLinkActive="active">About</a></li>
      <li><a routerLink="/resources" routerLinkActive="active">Resources</a></li>
      <li><a routerLink="/contact" routerLinkActive="active">Contact</a></li>
    </ul>
  </nav>
</div>
<div [ngStyle]="getHeaderStyle()" class="app-mainheader">
  <div class="app-mainheader__content set-margin">
  this is the header for the
  </div>
</div>
<router-outlet></router-outlet>
 <app-footer></app-footer>
`,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  showStyle = false;
  getHeaderStyle() {
    // ???
  }
}
2
javascriptcssangular
you should use "ActivatedRoute" on your app.component.ts. – Coşkun Deniz

2 Answers

2
votes

You could store the activateRoute as a member variable and style according to that.

export class AppComponent {
  activatedRoute = "";

Then, when you click on a link, you set the activatedRoute.

<a routerLink="/" routerLinkActive="active" (click)="activateRoute('home')>

activateRoute(activatedRoute: string) {
  this.activatedRoute = activatedRoute;
}

For the styling of the div, you use NgClass.

[ngClass]="{'home-class': activatedRoute === 'home', 'about-class': activatedRoute === 'about', ...}"

If you do not only want to do it, when someone clicks one of the links but always when the route is activated, then you should inject Router and check for the url.

[ngClass]="{'home-class': router.url === '/', 'about-class': router.url = 'about', ...}

// inject the router
constructor(public router: Router) {}

see a running example in this plunker

0
votes

If you want to keep the style / conditional code out of the template in an a function, you can test the route value and return a class based on the current path. This is easy to read / maintain, although it may not be the most elegant solution:

import { Router } from '@angular/router';

constructor(
    private router: Router
) {
}

getHeaderStyle() {
    if (this.router.url.includes('/about/')
        return 'red';
    } else if (this.router.url.includes('/resources/')){
        return 'green';
    } else if (this.router.url.includes('/contact/')){
        return 'yellow';
    } else {
         return 'blue'
}

In your component user [ngClass] to apply the class based on the function:

<div [ngClass]="getHeaderStyle()" class="app-mainheader">
  <div class="app-mainheader__content set-margin">
  this is the header for the
  </div>
</div>

Then create your styles for each colour:

.red {
    background-color: red;
}

etc.