У меня есть компонент, который имеет в качестве атрибута список строк. Я хотел бы создать n-экземпляры этого компонента с различными списками строк внутри и визуализировать их. Как я могу это сделать?
<mat-sidenav-container>
<mat-sidenav #sidenav>
<mat-nav-list>
<ng-template let-art let-last="last" ngFor [ngForOf]="categories">
<a mat-list-item [routerLink]="['/category/', art.name]"> {{art.name}} </a>
</ng-template>
<a mat-fab color="accent" class="mat-fab-bottom-right fixed z-3" (click)="prueba()">
<mat-icon>add</mat-icon>
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<div style="height: 88vh;">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
import { Component } from '@angular/core';
import { Routes, Router, Route } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { CategoryComponent } from './category/category.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
routes: Routes = AppRoutingModule.getRoutes();
categories : Array<CategoryComponent>;
title = 'app works!';
i: number;
constructor(private router: Router){
this.i = 11;
console.log(this.routes);
this.categories = new Array();
}
prueba(){
var a : CategoryComponent = new CategoryComponent();
a.setName(this.i.toString())
this.i++;
this.categories.push(a);
}
navegar(ruta:string){
this.router.navigate([ruta]);
}
}