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

Guide on how to focus on a specific node programmatically within a PrimeNG Tree component

Simplifying the process of implementing Jquery CSS Toggles

angular overlapping collapsing

Why is the mat-toolbar and mat-toolbar-row in the footer (shared) component of Angular 6 not showing up correctly, despite no error being reported?

Ensure that the child element completely fills the parent element while maintaining a padding around the edges

Show objects based on issuance date

What is the best way to integrate an admin template into a website without relying on popular CMS platforms like WordPress?

Save the ID values of selected users in Angular Mentions feature

Updating the display in Angular 4 following modifications to an array

Can you explain the distinction between using get() and valueChanges() in an Angular Firestore query?

Issues with compatibility between @ngui/auto-complete and ng2-daterangepicker in Angular 16

Generate the Ionic build and save it to the /dist directory instead of the /www

Using background-image in Internet Explorer has always been a challenge

A guide on retrieving all the table data and displaying it in the user interface using templates in Django

What could be causing flexbox not to shrink to fit after wrapping its elements?

Angular update row and save data to an array

Creating a personalized tooltip in Angular for a bubble chart with ApexCharts

Drop and drag the spotlight

How come flex won't let me rearrange an image?

Issue: The element '[object Object]' is of type 'object', which is not supported by NgFor. NgFor only works with Iterables like Arrays. - Problem encountered in an Ionic Project