TS-code:
modules is an array of objects, which itself contain a nested array of object.
const modules =[{
id: 1,
module: 'Training Module',
subModules: [{
id: 2,
module: 'Group Creation'
}, {
id: 3,
module: 'Sub Group Creation'
}, {
id: 4,
module: 'Training'
}, {
id: 5,
module: 'Daily Attendance'
}
]
}];
HTML-code:
<tr *ngFor="let module of modules">
<td>{{ item.subModules[0].module }}</td> <!-- giving Group Creation -->
</tr>
Expected Output image description here
You can use a virtual container, if you do not want to add an additional element, like this:
<tr *ngFor="let module of modules">
<td>
<ng-container *ngFor="let subModule of item.subModules">
{{ subModule.module }}
</ng-container>
</td>
</tr>
Alternatively, you could create a pipe, that formats the names of your submodules by for example comma separation.