Angular bootstrap how to make card of a card-deck to be active when routerlinkactive is true

Question

I am using Angular 7 + Bootstrap. I am using bootstrap card deck to create 3 menus. When the routerlinkactive is active, I want to style the border for that particular card, where the link is available.

<div class="container-fluid">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow"> <!-- want to style at this level when link is active -->
      <div class="card-header pb-2">
        <h4 class="my-0 font-weight-normal">Menu 1</h4>
      </div>
      <div class="card-body">
        <a routerLinkActive="active" routerLink='my-courses' class="link-unstyled">
          <i class="fas fa-tasks fa-9x"></i></a>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header pb-2">
        <h4 class="my-0 font-weight-normal">Menu 2</h4>
      </div>
      <div class="card-body">
        <a routerLinkActive="active" routerLink='completion-certs' class="link-unstyled">
          <i class="fas fa-award fa-9x"></i></a>
      </div>
    </div>
    <div class="card mb-4 box-shadow">
      <div class="card-header pb-2">
        <h4 class="my-0 font-weight-normal">Menu 3</h4>
      </div>
      <div class="card-body">
        <a routerLinkActive="active" routerLink='self-certification' class="link-unstyled">
          <i class="fas fa-book-reader fa-9x"></i></a>
      </div>
    </div>
  </div>

</div>

Answer 1

You can use something like this.

<a #rla="routerLinkActive" routerLinkActive="active" routerLink='my-courses' class="link-unstyled">.... </a>

and on the card div you can use [class.active-card]="rla.isActive"