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
}

Answer 1

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