when lazy loading mat-tab content using <router-outlet>, within mat-tab content routed...

I have created a mat tab group and using ng-for to load tabs using router outlet, As I add new tab and navigate the url my new routed component is constructed twice and previous tab content is replaced with new content.

Sample Code:
mat-tab-group (selectedTabChange)="tabClick($event)" [selectedIndex]="selected.value"
(selectedIndexChange)="onIndexChanged($event)" animationDuration="0ms">
<mat-tab *ngFor="let tab of tabs; let i = index" [label]="tab">
<ng-template mat-tab-label>
{{tab.Name}}
</ng-template>
<router-outlet></router-outlet>
</mat-tab>
</mat-tab-group>


typescrpt code :

export class MyTabComponent implements OnInit { public tabs: any; // property which I loop in HTML public selected = new FormControl();

ngOnInit() {
this.myservice.NewTabArrived.subscribe(
(newTab) => {

let url = newTab.Url // URL of comp to load in new tab
this.tabs.push({tabName:newTab.Name}); // This is use din ngFor in html

this.router.navigate(, {relativeTo: this.activatedRoute ...t-within-mat-tab-content"]Continue reading...