I have a situation where my Angular component has an array of Input variables that are asynchronously initialized in the parent component.
@Component({ ... })
export class ChildComponent {
@Input inputVariable: string;
}
@Component({ ... })
export class ParentComponent implements OnInit {
inputVariables: string[] = [];
constructor( private http: HttpClient ) { }
ngOnInit(): void {
this.http.get<string[]>('someUrl')
.subscribe(res => this.inputVariables = res)
}
}
Now I am looking to display a ChildComponent within parent.component.html for each input variable like this:
<div *ngFor="let inputVariable of inputVariables">
<child-component [inputVariable]="inputVariable" />
</div>
Even though in ChildComponent I am certain that inputVariable is defined, TypeScript raises a complaint stating that the type of inputVariable must be string or undefined. Having to check if inputVariable is defined in every usage within ChildComponent is not ideal. Is there a way for TypeScript to recognize that inputVariable will always be defined for any rendered ChildComponent?