Generating Dynamic Template Reference Variables in Angular 6

Question

We have a customised component from MDB (http://mdbootstrap.com), which requires the definition of template reference variables.

We are creating a listing that utilises a Card Component (https://mdbootstrap.com/angular/components/flipping-cards/). We define the basic template for one card, and then use *ngFor to loop through the data and create a card of the same template for each entry in our data.

The card component uses the following structure:

<mdb-card-rotating #cards>

  <!-- Card's structure comes in here -->

  <!--Triggering button-->

  <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">

</mdb-card-rotating>

This component uses the template reference variable #cards to run the function toggle(), which rotates the card to display additional content.

However, this reference variable needs to be unique for each card; in our current set-up, the *ngFor loop ends up creating the same reference variable #card for all our generated cards, and then, when the triggering button is pressed from any of the cards, all cards end up rotating instead of just that specific card.

Here's the entire structure:

<div class="mb-5 pb-4 col-sm-12 col-xs-12 col-md-12 col-lg-4" *ngFor="let el of fetchedResults; let i =  index">
  <div class="col-md-12">
    <mdb-card-rotating #cards>
      <!--Front Side-->
      <div class="face front tp-box_side tp-box_front">
        <!-- Image-->
        <div class="card-up">
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2859%29.jpg" class="img-fluid">
        </div>
        <!--Avatar-->
        <div class="avatar">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%289%29.jpg" class="rounded-circle img-responsive">
        </div>
        <!--Content-->
        <div class="card-body">
          <h4>{{ el.first_name }} {{ el.last_name }}</h4>
          <p>{{ el.profession }}</p>
          <!--Triggering button-->
          <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()"><i class="fa fa-repeat"></i> Click here to
            rotate</a>
        </div>
      </div>
      <!--/.Front Side-->

      <!--Back Side-->
      <div class="back tp-box_side tp-box_back">

        <!--Content-->
        <h4>About me</h4>
        <hr>
        <p>{{ el.about }}</p>
        <hr>
        <!--Social Icons-->
        <ul class="list-inline">
          <li class="list-inline-item">
            <a class="icons-sm fb-ic">
              <i class="fa fa-facebook"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm tw-ic">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm gplus-ic">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="icons-sm li-ic">
              <i class="fa fa-linkedin"></i>
            </a>
          </li>
        </ul>
        <!--Triggering button-->
        <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
          <i class="fa fa-undo"></i> Click here to rotate back</a>

      </div>
      <!--/.Back Side-->
    </mdb-card-rotating>

  </div>
</div>

Any assistance/guidance or alternatives would be highly appreciated!