card flip with backface-visibilty: hidden

I'll appreciate suggestions on how to 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 css property to hide the mirror display onflip but I think that is hiding the close button from the Dom so when you click on the close button no event is triggered. Any advise or suggestion on how to resolve or another way to achieve this would be appreciated. Thanks.

@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

Have a look and hope it makes sense?