flipping card not working after adding class 'flipped&#

In this case you should use built-in toggle method, here is an example:

HTML:

<!--Rotating card-->
<div class="col-md-4">
  <mdb-flipping-card #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>Jonathan Doe</h4>
        <p>Web developer</p>
        <!--Triggering button-->
        <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
          <mdb-icon fas icon="redo"></mdb-icon> 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>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem
        amet repellat,
        dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium
        quaerat?</p>
      <hr>
      <!--Social Icons-->
      <ul class="list-inline">
        <li class="list-inline-item">
          <a class="icons-sm fb-ic">
            <mdb-icon fab icon="facebook-f"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="icons-sm tw-ic">
            <mdb-icon fab icon="twitter"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="icons-sm gplus-ic">
            <mdb-icon fab icon="google-plus"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="icons-sm li-ic">
            <mdb-icon fab icon="linkedin-in"></mdb-icon>
          </a>
        </li>
      </ul>
      <!--Triggering button-->
      <a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
        <mdb-icon fas icon="undo"></mdb-icon> Click here to rotate back</a>

    </div>
    <!--/.Back Side-->
  </mdb-flipping-card>
</div>
<!--/.Rotating card-->

TS:

@ViewChild('cards', { static: true }) flippingCard: CardRotatingComponent;

  ngOnInit() {
    this.flippingCard.toggle();
  }