0

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[] = [];
Mouad
  • 3
  • 2
  • Does this answer your question? [How do I pass data to Angular routed components?](https://stackoverflow.com/questions/36835123/how-do-i-pass-data-to-angular-routed-components) – The Fabio Jun 07 '22 at 11:03
  • Please provide a working example. For angular that means using https://stackblitz.com/ – Nathaniel Johnson Jun 07 '22 at 11:21

0 Answers0