This is my object:
dynamicData =
{
uni_id:{options: [1,2,3,4]},
}
I want to use ngfor loop like this:
<option *ngFor="let opt of dynamicData.uni_id.options" value="{{opt.value}}">{{ opt.label }}</option>
The problem is : uni_id is dynamic and is available at run time. uni_id key itself is dynamic. it can be uni_id5, uni_id7 anything coming from db How can i use it in the template
You can use keyvalue pipe to dynamically loop through object properties.
Try like this:
<ng-container *ngFor="let opt of dynamicData | keyvalue">
<option *ngFor=" let item of dynamicData[opt.key].options" value="{{item}}">{{item }}</option>
</ng-container>
please use it like this
<option *ngFor="let opt of dynamicData.uni_id?.options" value="{{opt.value}}">{{ opt.label }}</option>
this way you can check if data is there in uni_id then only show
if you are getting dynamic value for uni_id then
in ts file
let uniqueId = Object.keys(this.dynamicData).filter(key => key.startsWith('uni_id'))[0]
list = this.dynamicData.uniqueId
in html file
<option *ngFor="let opt of list.options" value="{{opt.value}}">{{ opt.label }}</option>
You can create a variable which will contain name of key:
keyName ='uni_id';
dynamicData = {
uni_id: { options: [1, 2, 3, 4] }
};
and use this key in HTML template:
<select>
<option
*ngFor=" let item of dynamicData[keyName].options"
value="{{item}}">
{{item }}
</option>
</select>
