cannot access input variables in ngOnInit angular

Question

I have the following component

@Component({
    selector: 'app-models-sd-htmlview',
    styleUrls: ['./sd.component.scss'],
    template: `
        <iframe id="htmlview" style="width:100%; height:200%;" [src]="iframe"></iframe>
    `
})
export class HtmlViewComponent implements OnInit {
    @Input() urlhash;
    @Input() predictiontag;

    public iframe;

    constructor(public sanitizer: DomSanitizer)
    {
        this.sanitizer = sanitizer;
    };

    ngOnInit()
    {
        var url = "http://localhost:8080/htmlview/" + this.urlhash + "/" + this.predictiontag + ".html";
        this.iframe = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

<app-models-sd-htmlview [urlhash]="urlhash" [predictiontag]="predictiontag"></app-models-sd-htmlview>

But when I render everything, this is what I see. The values for this.urlhash and this.predictiontag are undefined.

[`@Input` properties are available in `ngOnInit`](https://stackoverflow.com/questions/38020950/angular-in-which-lifecycle-hook-is-input-data-available-to-the-component). How is the parent instantiating `urlhash` and `predictiontag`? You might have to wait for them by adding a condition to the child like: ``. — D M, Feb 04 '22 at 19:46

Juan Vicente Berzosa Tejero · Answer 1 · 2022-02-04T20:10:24.570

For some reason, it takes time to get the values for 'urlhash' and/or 'predictiontag' in the parent, so them are not "binded" yet to the 'HtmlViewComponent' component when it execute ngOnInit() method.

Try this little change, to achive that 'iframe' property only try to gets its value when 'urlhash' and 'predictiontag' get their value:

export class HtmlViewComponent implements OnInit {
@Input()
  set data (data : {
    urlhash: string;
    predictiontag: string;
  }) {
    var url = "http://localhost:8080/htmlview/" + data.urlhash + "/" + data.predictiontag + ".html";
    this.iframe = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
...
ngOnInit() {}
...

And in your parent HTML:

<app-models-sd-htmlview [data]="{ urlhash: urlhash, predictiontag: predictiontag }">
</app-models-sd-htmlview>

NOTE: If it works fine, probably this shortened form will work as well:

<app-models-sd-htmlview [data]="{ urlhash, predictiontag }">
</app-models-sd-htmlview>

score 0 · Answer 2 · answered Feb 04 '22 at 20:25

A simple *ngIf will prevent the component from instantiating while the variables are undefined.

<app-models-sd-htmlview *ngIf="urlhash && predictiontag" [urlhash]="urlhash" [predictiontag]="predictiontag">

That assumes that your two variables become defined at some point. If not, then the problem lies in the parent component.

cannot access input variables in ngOnInit angular

2 Answers2