I am retrieving a list of items from my database. I want to generate flip cards as many as the number of elements retrieved from the database. Is there a way to dynamically add flip cards with the respective item label on each card?

Here is the current code :

records.component.html

```html
<app-card></app-card>
```

records.component.ts

```js
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-records',
  templateUrl: './records.component.html',
  styleUrls: ['./records.component.scss']
})
export class RecordsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
```

card.component.html

```html
<div class="tp-wrapper">
 <div class="tp-box" (click)="toggleFlip()" [@flipState]="flip">
  <div class="tp-box__side tp-box__front">
            <label style="color: lawngreen;">Institute Name</label>
            <label style="color: lawngreen;">Date of Visit</label>
  </div>
  <div class="tp-box__side tp-box__back">
            <label style="color: lawngreen;">Prescription</label>
            <label style="color: lawngreen;">Medicine</label>
            <label style="color: lawngreen;">Type</label>
            <label style="color: lawngreen;">Duration</label>
            <label style="color: lawngreen;"> Per day</label>
  </div>
 </div>
</div>
```

card.component.ts

```js
import { Component, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss'],
  animations: [
    trigger('flipState', [
      state('active', style({
        transform: 'rotateY(179deg)'
      })),
      state('inactive', style({
        transform: 'rotateY(0)'
      })),
      transition('active => inactive', animate('500ms ease-out')),
      transition('inactive => active', animate('500ms ease-in'))
    ])
  ]
})
export class CardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  flip: string = 'inactive';

  toggleFlip() {
    this.flip = (this.flip == 'inactive') ? 'active' : 'inactive';
  }

}
```

In records page, I wish to dynamically add the cards based on number of items[ Retrieved as a list] I retrieve from a database.