Setting style based on the condition of the router URL

Question

Setting style based on the condition of the router URL

I am currently facing an issue with a global script in Angular 10 that is supposed to evaluate the current path and apply a style to the navigation bar conditionally. However, it seems to fail at times when using router links. I am wondering if there is a more efficient way to achieve this in Angular/Typescript that works seamlessly with router links.

$(document).ready(function(){
  if (window.location.pathname != "/") {
    $('#main-nav').css('background-color', 'black');
  }
});

The functionality I want is simple: change the navbar color to black if the page is not the homepage.

I have come across suggestions about using ngOnInitView but I am unsure about where to implement it (should it be within my navbar component?).

Any insights or guidance on this issue would be greatly appreciated.

angular typescript

Answer 1

Answer №1

To monitor changes in the router using your navbar component, you can make use of the Angular Router service (@angular/router).

isPage: boolean = false;

constructor(private router: Router) {}

ngOnInit(): void {
  this.router.events
    .pipe(filter(event => event instanceof NavigationEnd))  
    .subscribe((event: NavigationEnd) => {
        this.isPage = event.url === "/"; // Set a boolean based on current URL
    });
}

You have multiple options for updating the style of your navbar in the HTML. One approach is to utilize ngClass or ngStyle. For example;

<div id="main-nav" [style.background-color]="isPage ? 'black' : null">
    Main
</div>

Answer 2

To monitor changes in the router using your navbar component, you can make use of the Angular Router service (@angular/router).

isPage: boolean = false;

constructor(private router: Router) {}

ngOnInit(): void {
  this.router.events
    .pipe(filter(event => event instanceof NavigationEnd))  
    .subscribe((event: NavigationEnd) => {
        this.isPage = event.url === "/"; // Set a boolean based on current URL
    });
}

You have multiple options for updating the style of your navbar in the HTML. One approach is to utilize ngClass or ngStyle. For example;

<div id="main-nav" [style.background-color]="isPage ? 'black' : null">
    Main
</div>

Answer 3

Answer №2

To retrieve the route, you can implement the following approach:

Utilize Router from @angular/router

Within the constructor:

constructor(private router: Router){}

You can then access the URL route using:

this.router.url

If you need to monitor for changes, subscribe to it by:

this.router.events.subscribe((value) => {
  If (val instance of NavigationEnd){
    this.onRoute = val.url;
  }
}

Keep in mind that this.onRoute is a declared variable public onRoute: string

You can then utilize the onRoute variable to assess information about the route.

In addition, within the HTML, you can incorporate the noHomeBackground class (which represents your custom styling) when the condition this.onRoute!=='/' is met.

<div [class.noHomeBackgroud]="this.onRoute!=='/'">
...
</div>

Answer 4

To retrieve the route, you can implement the following approach:

Utilize Router from @angular/router

Within the constructor:

constructor(private router: Router){}

You can then access the URL route using:

this.router.url

If you need to monitor for changes, subscribe to it by:

this.router.events.subscribe((value) => {
  If (val instance of NavigationEnd){
    this.onRoute = val.url;
  }
}

Keep in mind that this.onRoute is a declared variable public onRoute: string

You can then utilize the onRoute variable to assess information about the route.

In addition, within the HTML, you can incorporate the noHomeBackground class (which represents your custom styling) when the condition this.onRoute!=='/' is met.

<div [class.noHomeBackgroud]="this.onRoute!=='/'">
...
</div>

Answer 5

Answer №3

If you want to dynamically change the style of an HTML element in Angular based on the route it is navigating, you can follow these steps:

Firstly, in the div.component.html file

<div [ngClass]="[router.isActive('/colored-div', true) ? 'colored-div': 'non-colored-div' ]">

By using [ngClass] within the HTML element, you are conditionally applying CSS classes depending on whether the route is active or not.

The isActive() function checks if the specified URL is currently active or not.

Next, in the div.component.css file

div {
   width:90%;
   height:10vh;
}
.colored-div {
   background-color: skyblue;
}

.non-colored-div {
   background-color: transparent;
}

Lastly, inside the constructor of the div.component.ts file

constructor(public router: Router){}

It's important to note that the router variable needs to be marked as public in order for it to be accessible within the template.

Answer 6

If you want to dynamically change the style of an HTML element in Angular based on the route it is navigating, you can follow these steps:

Firstly, in the div.component.html file

<div [ngClass]="[router.isActive('/colored-div', true) ? 'colored-div': 'non-colored-div' ]">

By using [ngClass] within the HTML element, you are conditionally applying CSS classes depending on whether the route is active or not.

The isActive() function checks if the specified URL is currently active or not.

Next, in the div.component.css file

div {
   width:90%;
   height:10vh;
}
.colored-div {
   background-color: skyblue;
}

.non-colored-div {
   background-color: transparent;
}

Lastly, inside the constructor of the div.component.ts file

constructor(public router: Router){}

It's important to note that the router variable needs to be marked as public in order for it to be accessible within the template.

Setting style based on the condition of the router URL

Answer №1

Answer №2

Answer №3

Similar questions

In Angular 9, when using ngOnChange, the attribute SimpleChanges.firstChange will always be false even if the value has been

How can I wrap text in Angular for better readability?

Comparison between TypeScript's variable scope and JavaScript's variable scope

I am struggling to set a required input in Angular2

Angular - Error: Object returned from response does not match the expected type of 'request?: HttpRequest<any>'

ng2-dragula error: issues with setting options and dropping version

Library of Functions in Angular 2

The routing functionality in Angular4 encounters issues when the `router.navigate()` method is used within the callback of a

Implementing Angular's Advanced Filtering Across Multiple Data Fields

TypeScript purity - "The variable exports is not defined"

Having trouble executing a method from a template in Angular 5?

Error encountered in spyOn TS when passing array iteration instead of a string

Develop a directive for transforming data

Executing asynchronous functions in Angular 2

Adding extra fields to an existing JSON response in a TypeScript REST API

Utilizing a directive in contexts beyond a component

Azure Function responding with a 401 error code upon passing parameters through a proxy

Enhancing the loading speed of hefty Angular components

Chrome stack router outlet and the utilization of the Angular back button

AngularMap with mapping as the value