Angular Input Signals and sanitized values

Question

I thought that I can use an URL as input Signal in my preview.component like

hrefLink = input.required<SafeValue>();

and in the .html use it like

<img [src]="hrefLink"/>

I have configured in my config.component.ts:

useLink:SafeValue;
...
initMethod() {
  this.useLink=this.domSanitizer.bypassSecurityTrustResourceUrl(
    myNavigationURL
  )

and use it in the config.component.html

<app-preview [hrefLink]="useLink"/>

But matter of fact I get an error saying:

 unsafe:[Input Signal: SafeValue must use [property]=binding

Do I miss something or is there a hole in the TypeCheck?

Naren Murali · Accepted Answer · 2024-04-30 08:56:14Z

1

Please call the signal like below before sending to [src], we need to execute it, before sending it as an input to the src property binding!

import { Component, input } from '@angular/core';
import { SafeValue } from '@angular/platform-browser';

@Component({
  selector: 'app-preview',
  standalone: true,
  imports: [],
  template: `<img [src]="hrefLink()"/>`, // <- changed here!
})
export class PreviewComponent {
  hrefLink = input.required<SafeValue>();
}

FULL CODE:

PREVIEW:

import { Component, input } from '@angular/core';
import { SafeValue } from '@angular/platform-browser';

@Component({
  selector: 'app-preview',
  standalone: true,
  imports: [],
  template: `<img [src]="hrefLink()"/>`,
})
export class PreviewComponent {
  hrefLink = input.required<SafeValue>();
}

PARENT:

import { Component, inject } from '@angular/core';
import {
  DomSanitizer,
  SafeValue,
  bootstrapApplication,
} from '@angular/platform-browser';
import 'zone.js';
import { PreviewComponent } from './app/preview/preview.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PreviewComponent],
  template: `
    <app-preview [hrefLink]="useLink"/>
  `,
})
export class App {
  myNavigationURL = 'https://placehold.co/600x400';
  useLink!: SafeValue;
  domSanitizer = inject(DomSanitizer);

  ngOnInit() {
    this.useLink = this.domSanitizer.bypassSecurityTrustResourceUrl(
      this.myNavigationURL
    );
  }
}

bootstrapApplication(App);

Stackblitz Demo

edited Apr 30, 2024 at 8:56

answered Apr 30, 2024 at 8:46

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

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

1 Comment

LeO Over a year ago

Thx for the response - seems like the error is inherited with the usage of input-signals :-/ Anyway - thx for pinpointing and correction.

Collectives™ on Stack Overflow

Angular Input Signals and sanitized values

1 Answer 1

FULL CODE:

PREVIEW:

PARENT:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

FULL CODE:

PREVIEW:

PARENT:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related