Angular Display/Hide Image On Button Click

Question

In my code, I'm trying to display and hide an image via a link when a button is clicked. Right now, when I click the button, the image opens in a different tab in Chrome. But I want to display it in my app's page. I need to assign the link to the TypeScript to make some changes later but I couldn't figure it out. How can I do that?

HTML:

<button mat-button matRipple class="purple-500 fuse-white-fg mr-12" (click)="imageSource()">Display</button>

TS:

    imageSource(){
window.open("http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/^xa^cfa,50^fo100,100^fdHello World^fs^xz");
    }

Answer 1

Unfortunately, you can't just display images like this, however. More information here.

Here's how you can display an image depending on a button click.

<button mat-button matRipple class="purple-500 fuse-white-fg mr-12"; (click)="imageSource()">Display</button>
<img [src]="url" *ngIf="hidden" />

---

let hidden = false;
let url = "http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/^xa^cfa,50^fo100,100^fdHello World^fs^xz"

imageSource(){
    this.hidden = !this.hidden;
}