2

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");
    }
Grim Stone
  • 95
  • 2
  • 9
  • Does this answer your question? [Angular 5 ngHide ngShow \[hidden\] not working](https://stackoverflow.com/questions/49669654/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 Jun 04 '21 at 10:23

1 Answers1

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;
}
mneumann
  • 713
  • 2
  • 9
  • 42