Sanitization in Angular

Question

I have a child model that has an attribute photoPath

export interface Child {
    chIld: number;
    firstName: string;
    photoPath?: string;
    
    photos: Photo[];
}

I am trying to sanitize the photoPath to bypass angular security

export class ChildrenCardComponent implements OnInit {

    @Input() children: Child;

    public imgurl: Child["photoPath"];

    constructor(private sanitizer: DomSanitizer) { 
        this.sanitizer.bypassSecurityTrustResourceUrl(this.imgurl)
    }

    ngOnInit(): void {
       
    }
}

The path is called and assigned as seen (public imgurl: Child["photoPath"];) in an array

The HMTL calls the imgurl as shown below:

 <img [src]="imgurl >

Answer 1

Resolved

 @Input() children: Child;
  
  public imgurl: any;
  
  

  constructor(public sanitizer: DomSanitizer) { 
   
  }

  ngOnInit(): void {
     this.imgurl=this.sanitizer.bypassSecurityTrustResourceUrl(this.children.photoPath)
 
  }