Angular Assigning Variables to Links

Question

In my app, I'm displaying an image through a link when a button is clicked. Currently, the sentence 'Hello World' is displayed. But I want to display my own data which is _stickerData?.stickerData through the link. How can I achieve what I want?

HTML;

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

TS;

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

@Input()
    set StickerData(prm: IStickerData) {
        if (this._stickerData != prm) {
            this._stickerData = prm;
        }
    }
    get StickerData(): IStickerData {
        return this._stickerData;
    }

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

Answer 1

You can update the url within the @Input setter by interpolate it with ${} operator:

  public stickerData: IStickerData;
  hidden = false;
  url;

  @Input()
  set StickerData(prm: IStickerData) {
    if (this.stickerData !== prm) {
      this.stickerData = prm;
    }
    this.url = `http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/^xa^cfa,50^fo100,100^fd${this.stickerData?.stickerData}^fs^xz`;
  }
  get StickerData(): IStickerData {
    return this.stickerData;
  }

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