card flip with backface-visibilty: hidden

How do I achieve this flip functionality in my angular application? I currently have it partially working (please see sample on stackblitz (click to review sample).

I am currently using backface-visibiity: hidden to hide the mirror display on flip, but I think that is hiding the close button from the Dom so when you click on the close button no event is triggered.

@Component({
  standalone:true,
  selector: 'app-root',
  template: `
  <div class = "parent" [@flip]="flip">
  <div class = "child-1">
    <app-front (flip)="updateFlip($event)"></app-front>
</div>
<div class = "child-2">
    <app-back (flip)="updateFlip($event)"></app-back>
</div>
</div>
  `,
  imports:[FrontComponent,BackComponent],
  animations: [
    trigger('flip', [
      state('false', style({
        transform: 'none'
      })),
      state('true', style(
        {transform: 'rotateY(180deg)'}
    )),
      transition('false <=> true', animate('500ms ease-in'))
    ])
  ]
})
export class App {
  flip = false;

  updateFlip($event:boolean){
    this.flip = $event
  }

CSS:

.parent{
    position: relative;
    backface-visibility: hidden;
   }
.child-1{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
   }
.child-2{
    position: absolute;
    top: 0;
    transform: rotateY(-180deg);
     width:100%;
   }

Solution

In Angular you always have have a root component (app component), in which displays your other angular components, in this case the flip-card component:

<flip-card>
  <flip-card-front>
    <h2>This is card front</h2>
  </flip-card-front>
  <flip-card-back>
    <h2>This is card back</h2>
  </flip-card-back>
</flip-card>

Using the [ngClass]="toggleProperty ? 'flipped' : ''" directive can then toggle between the flip-card-front & flip-card-back components.

I found an old Angular 15 project here, and have updated it to Angular 19, as the way Component modules work is slightly different.

Stackblitz Here