Implementing ngClass with a dynamic ID in the URL condition

Question

Implementing ngClass with a dynamic ID in the URL condition

I am attempting to create an ngClass condition that adds an active class to a list element. Specifically, I want it to work for both the URLs '/companies' and '/company/:id'.

The issue I am facing is that the current setup does not function properly for the '/company/:id' URL. How can I modify the condition so that it works for any 'id' instead of specifically ':id'?

<li class="nav-item" [ngClass]="{'active': menuActive === '/companies', 'active': menuActive.includes('/company')}" *ngIf="isLoggedIn">

css angular twitter-bootstrap

Answer 1

Answer №1

When creating an object, it's crucial to avoid assigning the same property twice. If you find yourself in a situation where there is no predefined logic to follow, you can utilize code like this:

<li class="nav-item" [ngClass]="{active: menu === 'a' || menu === 'b' }"

To handle the active class conditionally in the HTML, you can modify the rule to check with the component:

<li class="nav-item" [ngClass]="{active: isActive(menu) }" *ngIf="isLoggedIn">

And within your component:

isActive(menu: string) {
  const menuWithId = /^\/companies\/[a-z0-9]+$/i;
  return menu === "/companies" || menuWithId.test(menu);
}

Answer 2

When creating an object, it's crucial to avoid assigning the same property twice. If you find yourself in a situation where there is no predefined logic to follow, you can utilize code like this:

<li class="nav-item" [ngClass]="{active: menu === 'a' || menu === 'b' }"

To handle the active class conditionally in the HTML, you can modify the rule to check with the component:

<li class="nav-item" [ngClass]="{active: isActive(menu) }" *ngIf="isLoggedIn">

And within your component:

isActive(menu: string) {
  const menuWithId = /^\/companies\/[a-z0-9]+$/i;
  return menu === "/companies" || menuWithId.test(menu);
}

Implementing ngClass with a dynamic ID in the URL condition

Answer №1

Similar questions

Bidirectional data binding in Angular 2 for the class attribute

The Google Map is not showing all the details

Position the middle character within a span that has the identical width and height

Modify anchor link color in a one-page website by using Jquery to detect scroll position changes when reaching different page sections

The outerHeight of Elements measured in pixels

Mastering the Art of Utilizing $(this) in jQuery

Troublesome situation arising from CSS floats overlapping div elements

When is the right time to develop a new component?

Is there a way to prevent an undefined legend from being automatically created in an ng 2 chart during the loading process?

Creating an external JavaScript and CSS file for date picker in Eclipse can be done by following a few simple steps. By creating separate files for the

positioning of multiple buttons in a customized header for mui-datatables

Encountering difficulty in retrieving the outcome of the initial HTTP request while utilizing the switchMap function in RxJS

Updating FontAwesome icon in Angular 10

Boundaries on Maps: A guide to verifying addresses within a boundary

The website is not displaying CSS styles as intended

Different ways to showcase an image from a library in Ionic 3

The functionality to open the menu by clicking is experiencing issues

What is the best way to customize the text in the navigation bar at the top of the page

The TypeError encountered in an Ionic pipe states that the property 'toString' cannot be read as it is undefined

Styling elements with CSS