title: Angular - trying to use *ngif on router-outlet to share data from child to parent /angular tabs
body: <p>I'm using tabs in angular and trying to share data from child component &quot;demandeConge&quot; to the parent &quot;congeComponent&quot;. The problem is that i want to do ngIf on the  to place this line of code <code>[model]=&quot;model&quot; (modelChanged)=&quot;modelChangeHandler($event)&quot;</code> in the router-outlet when the active routerlink is 'demandeConge'.</p>
  <p>What i tried :</p>
  <pre><code>&lt;div *ngIf=&quot;router.url=='demandeConge'&quot;&gt;
      &lt;router-outlet [model]=&quot;model&quot; (modelChanged)=&quot;modelChangeHandler($event)&quot;&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Parent component (ts file):</p>
  <pre><code>  label: string;
    route :string
  }
  @Component({
    selector: 'app-congeComponent',
    templateUrl: './congeComponent.component.html',
    styleUrls: ['./congeComponent.component.css']
  })
  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&lt;TabItem[]&gt;;
  
    constructor(private route: ActivatedRoute, router:Router) {
    }
  
    modelChangeHandler(model:Date[]) {
      this.model=model;
      console.log(&quot;[modelChangeHandler]:&quot;+model)
    }
  </code></pre>
  <p>Parent HTML file:</p>
  <pre><code>&lt;mat-card&gt;
    &lt;mat-card-title&gt;Demander un congé&lt;/mat-card-title&gt;
    &lt;br&gt;
    &lt;mat-card-subtitle&gt;Pick your range of dates or multiple dates&lt;/mat-card-subtitle&gt;
  
    &lt;nav mat-tab-nav-bar dynamicHeight&gt;
      &lt;a mat-tab-link *ngFor=&quot;let tabItem of tabs&quot; [routerLink]=&quot;tabItem.route&quot; routerLinkActive #rla=&quot;routerLinkActive&quot;
        [active]=&quot;rla.isActive&quot;&gt;
        {{tabItem.label}}
      &lt;/a&gt;
    &lt;/nav&gt;
    &lt;div *ngIf=&quot;router.url=='demandeConge'&quot;&gt;
      &lt;router-outlet [model]=&quot;model&quot; (modelChanged)=&quot;modelChangeHandler($event)&quot;&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
    &lt;!-- &lt;app-demandeMultipleDays [model]=&quot;model&quot; (modelChanged)=&quot;modelChangeHandler($event)&quot;&gt;&lt;/app-demandeMultipleDays&gt; --&gt;
    &lt;mat-card-actions&gt;
      &lt;button mat-button&gt;Submit&lt;/button&gt;
    &lt;/mat-card-actions&gt;
  &lt;/mat-card&gt;
  </code></pre>
  <p>App-routing module :</p>
  <pre><code>      path:'congeComponent',
        component:CongeComponentComponent,
        children:[
          {
            path:'demandeConge',
            component:DemandeCongeComponent,
            // outlet:'rangeCone'
          },
          {
            path:'demandeMultipleDays',
            component:DemandeMultipleDaysComponent,
            // outlet:'multipleConge'
          }
  </code></pre>