How to pass a value to a template?

Question

Angular

I pass the path value (svg) to the child component

<svg width="100%" height="521.2854" version="1.1" viewBox="0 0 300 300">
                <svg:g app-quiz-svg [svgshow]="quiz?.textCategory[numPage].textContentSvg" />
   </svg>

If you output quiz?.textCategory[numPage].textContentSvg, then the normal path is displayed - everything is fine here.
I accept it in a child component and convert it to DOM

export class SvgComponent {

@Input() svgshow : string; 
  svg:any;
  constructor(private sanitizer: DomSanitizer) {  
  this.svg = this.sanitizer.bypassSecurityTrustHtml(this.svgshow);
   }
  }

and take out

<svg:g [innerHTML]="svg" transform="translate(-8735.7488,-7966.7338)">

But in console Chrome I get undefined
And when @Input fires?

Answer 1

The constructor does not yet have the value of the Input parameters. Therefore, the best option here is to use the ngOnChanges hook.

...
ngOnChanges() {
  this.svg = this.sanitizer.bypassSecurityTrustHtml(this.svgshow);
}