flipping card height

You can use MutationObserver to listen to the change in the card content and then update the height accordingly. Here is an example code:

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>
          <p *ngIf="showText">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio porro iure, asperiores explicabo recusandae magni possimus aut dicta, necessitatibus molestiae, numquam mollitia expedita minus voluptatibus quo! Beatae molestiae iusto harum.</p>
      </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:

  showText = false;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {
    const cardHeight = 500;
    const cardWrapper = this.el.nativeElement.querySelectorAll('.card-wrapper');
    const cardBody = cardWrapper[0].querySelector('.card-body');


    const observer = new MutationObserver((mutations: MutationRecord[]) => {
      mutations.forEach(() => {
        const updatedHeight = cardHeight + cardBody.offsetHeight;
        this.renderer.setStyle(cardWrapper[0], 'height', updatedHeight + 'px');
      });
    });

    observer.observe(cardBody, {
      attributes: true,
      childList: true,
      characterData: true,
    });

    setTimeout(() => {
      this.showText = true;
    }, 2000);
  }