CODEWITHSUNDEEP
javascripthtmlangulartypescript
Grim Stone
Grim Stone

Reputation: 95

Angular Display/Hide Image On Button Click

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");
    }

Upvotes: 2

Views: 4117

Answers (1)

mneumann
mneumann

Reputation: 786

Unfortunately, you can't just display images like this. More information here. In short, you need to store the image in a binary format so you can GET it via HTTP request.

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

In your HTML template:

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

In your TS component:

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;
}

Upvotes: 2

Related Questions