Modify CSS parameters of Breadcrumb leaf with ngClass in Angular

Question

I am developing a Breadcrumb component in Angular which will show the complete address about the routing. Helping the user to go back to any step it was before. To get the actual url I am using ActivatedRoute. It works fine.

My question is about set different class to the last element using this example style of Breadcrumb. (Bootstrap 4) Which shows different style on the last element of the routing. (Data using active and aria-current="page")

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="/library">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

To get the last element of the list and set different CSS class I am using this example:

<li *ngFor="let item of items; let last = last" [ngClass]="{last: last}">{{item.path}}</li>

But I can not achieve the objective of enable class="active" and aria-current="page" using the css file which looks like:

.last{
  // I do not know how to enable from here active and arria-current
}

JoseJimRin · Accepted Answer · 2019-11-27 13:42:42Z

0

Finally I achieved. It is not necessary to use active class.

Using pointer-event you can disable the option to click the link using CSS class.

HTML

<li *ngFor="let item of items; let last = last" [ngClass]="{last: last}">{{item.path}}</li>

CSS

.last a{
    color: grey;
    pointer-events: none;
}

answered Nov 27, 2019 at 13:42

JoseJimRin

4021 gold badge6 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Modify CSS parameters of Breadcrumb leaf with ngClass in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related