I have an array like this:
type categories = {
name: string;
sub?: categories[];
};
categories: Array<categories> =
[{ name: 'C1',
sub: [{name: 'S1',
},
{name: 'S2',
sub: [{ name: 'SS1',
sub: [{ name: 'SSS1',
},
{ name: 'SSS2',
},],
},],
},],
},];
Every sub can have unlimited subs. How can I render all elements of all subarrays?
Thank you!
You can recursively nest components like so:
@Component({
selector: 'example-component',
template: `
<div *ngFor="let nestedCategory of nestedCategories.sub">
<div>{{nestedCategory.name}}</div>
<div *ngIf="nestedCategory.sub">
<example-component [nestedCategories]="nestedCategory.sub"></example-component>
</div>
</div>
`
})
export class ExampleComponent {
@Input('nestedCategories') nestedCategories!: Array<categories>;
}
Then in your parent component template you can declare it as follows:
<example-component [nestedCategories]="categories"></example-component>