Angular 8 - код шаблона маршрутизации, приводящий к не отвечающей гиперссылке или кнопке

Question

В следующих двух случаях использования угловая маршрутизация кажется смешанной. Код ниже показывает код, который выглядел законным.

USE CASE-1:

<!-- TEMPLATE CODE -->
<div class="row col-lg">
    <button mat-raised-button class="btn btn-primary" 
        (click)="assignmentdetail(element.assignment)">
            {{element.effDate| date}}</button>
</div>

<!---  HTML OUTPUT -->

<div _ngcontent-aqb-c30="" class="row col-lg">
   <button _ngcontent-aqb-c30="" class="btn btn-primary mat-raised-button" mat-raised-button="">
      <span class="mat-button-wrapper">May 6, 2019</span>
      <div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-centered="false" 
        ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div>
      <div class="mat-button-focus-overlay"></div>
   </button>
</div>

<!-- THE PROBLEM STATEMENT-->
Clicking the button does not call the event function. The button is not disabled.

USE CASE-2:

<!-- TEMPLATE CODE -->
<div class="row col-lg">
    <a [routerLink]="['details',element.assignment.assignmentId]">
        {{element.effDate| date}}</a>
</div>

<!-- HTML OUTPUT -->
<div _ngcontent-aqb-c30="" class="row col-lg">
    <a _ngcontent-aqb-c30="" ng-reflect-router-link="details,15561" 
        href="/assignment/10/00035960/history/details/15561">May 6, 2019</a>
</div>

<!-- PROBLEM STATEMENT -->
Although the hyperlink is active but clicking on it does not route to the path, there's nothing on the VS code debug console