CODEWITHSUNDEEP
javascripthtmlcssangularfrontend
bernard burnik
bernard burnik

Reputation: 13

dynamically change css of a DIV based on URL - Angular

I have a problem, I want to change CSS of the first DIV(background,width,height...) based on which RouterModule I'm on and this DIV is located in the main app.component.html

<div class="bg">
<div class="container-fluid">
<div class="row">
<div class="col-xl-2 col-lg-1 col-md-1 col-sm-1" id="logo">
  <a routerLink=""><b>Logo</b></a>
</div>
<div id="navigation" class="col-xl-8 col-lg-10 col-md-10 col-sm-10">
  <ul>
    <li><a routerLink="/zivljenjepis">O MENI</a></li>
    <li><a routerLink="/jeziki">JEZIKI</a></li>
    <li><a routerLink="/projekti">PROJEKTI</a></li>
    <li><a routerLink="/kontakt">KONTAKT</a></li>
  </ul>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>

Do you have any suggestions? Thank you

Upvotes: 0

Views: 3964

Answers (2)

j3ff
j3ff

Reputation: 6089

What you could do is subscribe on router.events to know when a navigation occurs. Then on NavigationEnd retrieve the current route path value and apply it as a CSS class on the desired HTML element with ngClass.

This means for example that navigating to home page will add a home class on the element you apply ngClass. You can then set the CSS class to style the element as you want.

StackBlitz example available here: https://stackblitz.com/edit/angular-stackoverflow-52907143

app.component.html

<div class="bg" [ngClass]="bgClass">
  <div id="logo">
    <a routerLink=""><b>Logo</b></a>
  </div>
  <div id="navigation">
    <ul>
      <li><a routerLink="/home">Home</a></li>
      <li><a routerLink="/products">Products</a></li>
      <li><a routerLink="/about">About</a></li>
    </ul>
  </div>
</div>
<router-outlet></router-outlet>

app.component.ts

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

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

  constructor(
    private router: Router,
  ) {
    // subscribe to router navigation
    this.router.events.subscribe(event => {
      // filter `NavigationEnd` events
      if (event instanceof NavigationEnd) {
        // get current route without leading slash `/`
        const eventUrl = /(?<=\/).+/.exec(event.urlAfterRedirects);
        const currentRoute = (eventUrl || []).join('');
        // set bgClass property with the value of the current route
        this.bgClass = currentRoute;
      }
    });
  }
}

app.component.css

.default {
  background: lightgray;
}

.about {
  background: lightpink;
}

.home {
  background: powderblue;
}

.products {
  background: lightgreen;
}

Upvotes: 2

Stavm
Stavm

Reputation: 8121

[routerLinkActive] Lets you add a CSS class to an element when the link's route becomes active.

HTML:

<a routerLink="/user/bob" routerLinkActive="class1">Bob</a>

CSS:

.class1 { background-color: red }

https://angular.io/api/router/RouterLinkActive

Upvotes: 3

Related Questions