I'm tring to navigate between tabs(components) and sharing data from child to parent.
I tried to add the content of this bracket <app-demandeMultipleDays [model]="model" (modelChanged)="modelChangeHandler($event)"></app-demandeMultipleDays>
in the <router-outlet>
when the routerlink of this component is active, but it doesn't work.
Please what i'm doing wrong.
app-routing.module.ts:
path:'congeComponent',
component:CongeComponentComponent,
children:[
{
path:'demandeConge',
component:DemandeCongeComponent,
outlet:'rangeConge'
},
{
path:'demandeMultipleDays',
component:DemandeMultipleDaysComponent,
outlet:'multipleConge'
}
]
Parent component (ts file):
export class CongeComponentComponent implements OnInit {
@ViewChild(DemandeCongeComponent) child: DemandeCongeComponent;
conge:Conge = new Conge();
model : Date[] =[]
tabs: TabItem[] = [
{
label: 'Range of days',
route: 'demandeConge',
},
{
label: 'Multiple days',
route: 'demandeMultipleDays',
},
];
asyncTabs: Observable<TabItem[]>;
constructor(private route: ActivatedRoute, router:Router) {
}
modelChangeHandler(model:Date[]) {
this.model=model;
console.log("[modelChangeHandler]:"+model)
}
Parent Html:
<nav mat-tab-nav-bar dynamicHeight>
<a mat-tab-link *ngFor="let tabItem of tabs" [routerLink]="tabItem.route" routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{tabItem.label}}
</a>
</nav>
<router-outlet *ngif="routerlink"(activate)='[model]="model" (modelChanged)="modelChangeHandler($event)"'></router-outlet>
<!-- <app-demandeMultipleDays [model]="model" (modelChanged)="modelChangeHandler($event)"></app-demandeMultipleDays> -->
Child component /DemandeMultipleDaysComponent (ts file):
@Output() modelChanged: EventEmitter<Date[]> = new EventEmitter();
@Input() public model : Date[] = [];