title: Angular - ActivatedRoute in click event
body: <p>I am using <code>ActivatedRoute</code> to call the summary table from one component to another component and I added below I am not able to get the summary table as expected in click event</p>
  <p><strong>tab-routing.module.ts</strong></p>
  <pre class="lang-typescript prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { TABMasterComponent } from '../tabs/tab-master/tab-master.component';
  
  
  const routes: Routes = [
    { path: &quot;tabmasters&quot;, component: TABMasterComponent,
          loadChildren:'../tabs/tab-master/tab-master.component',
       data:{
         istab : false
       }
       },
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { } 
  </code></pre>
  <p><strong>tabmasters.component.ts</strong></p>
  <pre class="lang-typescript prettyprint-override"><code>istab = false;
  
  
  constructor(private fb: FormBuilder,private router: Router, private toastr:ToastrService, private route:ActivatedRoute) {
        this.istab = this.route.snapshot.data.istab;
        console.log('here',this.route.snapshot.data)
        }
  </code></pre>
  <p><strong>tabmaster.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngIf=&quot;iscontrol&quot;&gt;
          &lt;div class=&quot;table-responsive&quot;&gt;
              &lt;table class=&quot;table&quot;&gt;
                  &lt;thead class=&quot;table_header&quot;&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr *ngFor=&quot;let cl of ClList;&quot;&gt;
                          &lt;td&gt;{{ cl.name}}&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
           &lt;/div&gt;
  &lt;/div&gt;
  &lt;div *ngIf=&quot;istab&quot;&gt;
          &lt;div class=&quot;table-responsive&quot;&gt;
              &lt;table class=&quot;table&quot;&gt;
                  &lt;thead class=&quot;table_header&quot;&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr *ngFor=&quot;let tab of tabList;&quot;&gt;
                          &lt;td&gt;{{ tab.name}}&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
           &lt;/div&gt;
  &lt;/div&gt;
  
  
  </code></pre>
  <p>I want to show istab summary when I use the click event in app component. but I am facing the problem is these two above table is in tab component and I want to show istab summary only in click event</p>
  <pre><code>TAB1----isctrl summary              TAB2-----istab summary                   
  </code></pre>
  <p>I used the <code>boolean</code> if I click <code>tab 1</code> <code>isctrl</code> <code>true</code> and <code>istab</code> <code>false</code>  and if I click <code>tab2</code> <code>ista</code> is <code>true</code> and <code>isctrl</code> is <code>false</code></p>
  <p>the above two summary is in <code>tabcomponent</code> which is used to show is bootstrap nav tabs like below tabs</p>
  <p><img src="https://i.stack.imgur.com/4P85D.png" alt="bootstrap tabs " /></p>
  <p>my <strong>app.component.HTML</strong> is like</p>
  <pre class="lang-html prettyprint-override"><code>&lt;button (click)=&quot;gotoTabsUMMARY()&quot;&gt;&lt;/button&gt;
  </code></pre>
  <p>and my <strong>app.component.TS</strong> is like</p>
  <pre class="lang-typescript prettyprint-override"><code>istab = false;
  
  
  constructor(private fb: FormBuilder,private router: Router, private toastr:ToastrService, private route:ActivatedRoute) {
        this.istab = this.route.snapshot.data.istab;
        console.log('here',this.route.snapshot.data)
        }
  
  
  
  gotoTabsUMMARY(){
          this.router.navigate([&quot;/tabsmasters&quot;], { skipLocationChange: true, this.istab})
  }
  
  
  
  </code></pre>
  <p>I want to go to the summary table in click event in app component. normal router link is working but I want to get summary which is in tab2 I used the another method emit is not working How to use <code>activatedRoute</code> to this..</p>