Angular 8-单击时如何在弹出窗口中显示图像

Question

我是新手，我陷入了一个问题。当我单击图像时，我想以弹出窗口或模式的形式显示图片。下面是我的网页和代码的屏幕截图。

enter image description here

html文件：

<p>gallery works!</p>
<img [src]="'./assets/cod1.jpg'" (click)="enlarge()"><br>
<img [src]="'./assets/cod2.jpg'">

component.ts文件：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { ActivatedRoute, Router } from "@angular/router";
import { ApiCallService } from '../api-call.service';
import { style } from '@angular/animations';

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

userid=0;
userIdFlag=false;
  constructor(public apicallservice:ApiCallService,public router: Router,
    public activatedRoute: ActivatedRoute,) { }

  ngOnInit(): void {
    this.activatedRoute.params.subscribe((param)=>{
      this.userid=param.id
      this.userIdFlag=this.userid > 0 ?true :false;
      if(this.userIdFlag){
        this.apicallservice.userById(this.userid).subscribe((data)=>{
          console.log(data)
        })
      }
    })
  }
  enlarge(){
    
   
  }
}