Can you add a Modal dialog to an existing component in Angular?

Question

I have a mat-card element with an image inside.

HTML

<mat-card id="CARDBOX">
       <img class="logo" src="path/image.jpg" alt="image" height=25px/>
</mat-card> 

TS

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

  constructor() { }

  ngOnInit(): void {}

}

I want it so that by clicking on the image it will open up a Mat Dialog with some more information about the image. Is it possible to do this by adding to my existing Cardbox component? I understand that I need an openDialog() method but I am unsure how to implement that into the existing ts component.

Answer 1

Its simple just add click event HTML

<mat-card id="CARDBOX" (click)="openDialog()">
   <img class="logo" src="path/image.jpg" alt="image" height=25px/>
</mat-card>

TS

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

  constructor(private dialog: MatDialog) { }

  ngOnInit(): void {}

  openDialog() {
   this.dialog.open(CardBoxComponent);
  }
}

You may experience issues with this in future I recommand to use another component for this for ex. CardBoxDialog. and then on this componet in HTML template just add

<app-cardbox></app-cardbox>