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

Does this answer your question? Angular 5 ngHide ngShow [hidden] not working You could use the *ngIf directive in your template and connect it to a boolean in your component. window.open() opens another window, which is probably not what you want. You could also use the img tag and conditionally show it with *ngIf. You can save the link in your component as a string and assign it to the image. — mneumann
– mneumann, Commented Jun 4, 2021 at 10:23

mneumann · Accepted Answer · 2021-09-30 21:28:18Z

2

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

edited Sep 30, 2021 at 21:28

answered Jun 4, 2021 at 10:43

mneumann

7963 gold badges11 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Display/Hide Image On Button Click

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related