dynamically change css of a DIV based on URL - Angular

Question

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

Give it a selector, like: <div #mainDiv>, access it through @ViewChild, then, OnInit (or, even better, OnChange), get the item and replace the CSS accordingly. Side note: please include the code as text, not as an image, thanks. — briosheje
– briosheje, Commented Oct 20, 2018 at 15:22

Stavm · Accepted Answer · 2018-10-20 15:53:13Z

3

[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

answered Oct 20, 2018 at 15:53

Stavm

8,1515 gold badges48 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

j3ff Over a year ago

This doesn't answer the OP question... this will add a class on the link element where routerLink is applied not a different element somewhere in the DOM as asked and clearly demonstrated with the code example.

j3ff · Accepted Answer · 2018-10-20 16:35:43Z

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;
}

Collectives™ on Stack Overflow

dynamically change css of a DIV based on URL - Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related