pass params from one component to another angular2

Question

I have many components. I declare my components in module. app.module.

      import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';
    import { HttpModule }    from '@angular/http';

    // Material 2
    import { MdCoreModule } from '@angular2-material/core';
    import { MdButtonModule } from '@angular2-material/button';
    import { MdButtonToggleModule } from '@angular2-material/button-toggle';
    import { MdCardModule } from '@angular2-material/card';
    import { MdRadioModule } from '@angular2-material/radio';
    import { MdCheckboxModule } from '@angular2-material/checkbox';
    import { MdTooltipModule } from '@angular2-material/tooltip';
    import { MdInputModule } from '@angular2-material/input';
    import { MdToolbarModule } from '@angular2-material/toolbar';
    import { MdTabsModule } from '@angular2-material/tabs';
    import { MdSidenavModule } from '@angular2-material/sidenav';

    // import { MdMenuModule } from '@angular2-material/menu';
    // import { TabsModule  } from 'ng2-tabs';


    import { AppComponent } from './app.component';
    import "hammerjs";
    import { routing,  appRoutingProviders } from './app.routes';
    import { DashboardComponent } from './dashboard/dashboard.component';
    import { IndexComponent } from './index/index.component';
    import { LoginComponent } from './login/login.component';
    import { NotFoundComponent } from './not-found/not-found.component';
    import { IndexService }          from './services/index.service';
    import { ErrorMessageComponent } from './error-message/error-message.component';

    import { MenuComponent } from './menu/menu.component';
    import { PageAnalysisComponent } from './page-analysis/page-analysis.component';
    import { SettingsComponent } from './settings/settings.component';
    import { SiteVsSiteComponent } from './site-vs-site/site-vs-site.component';
    import { SidenavComponent } from './sidenav/sidenav.component';


    @NgModule({
      declarations: [
        AppComponent,
        DashboardComponent,
        IndexComponent,
        LoginComponent,
        NotFoundComponent,
        ErrorMessageComponent,
        MenuComponent,
        PageAnalysisComponent,
        SettingsComponent,
        SiteVsSiteComponent, SidenavComponent

      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing,
        MdCoreModule, MdCardModule, MdButtonModule, MdRadioModule,
        MdCheckboxModule, MdTooltipModule,MdInputModule, MdToolbarModule,MdButtonToggleModule,
        MdTabsModule,MdSidenavModule
      ],
      providers: [appRoutingProviders,IndexService ],
      bootstrap: [AppComponent]
    })
    export class AppModule {

    }

So, now I would like to pass data from component Dashbord to PageAnalysisComponent component. How can I do it? here is a code of component Dashboard:

 import { Component, Input, Output, OnInit, ViewEncapsulation } from '@angular/core';
import { Params }   from '../services/index.service';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit {
  data: any;

  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route
      .params
      .subscribe(v => this.data = "hello");
  }

}

and PageAnalysisComponent component:  


  import { Component, Input, Output, OnInit } from '@angular/core';
import { Params }   from '../services/index.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-page-analysis',
  templateUrl: './page-analysis.component.html',
  styleUrls: ['./page-analysis.component.css']
})
export class PageAnalysisComponent implements OnInit {
  data: any;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
   //I woild like to have here data

  }

}

How can I transfer data from dashbord to PageAnalysisComponent component. Is it possible to do here?

Answer 1

There are 3 ways of sharing data between component

• Parent component to child Component: Use @Input() and @Output() to achieve
• Child component to parent component: Use @ViewChild() to achieve this
• Between any two component: Use Service . Services are singleton class (util declared more than once in providers). Any component which injects a service constructor(public myService: Myservice){} , their methods and properties are now available to the service.

For your purpose, use services .

• Create a service called DataService with a property data.
• Inject this service in dashboardComponent and PageAnalysisComponent .
• Use dataService.data in both the component. As the service is a singleton, the value of dataService.data will persist across the app.

PS: Intentionally avoided writing codes. Read more about services and other features mentioned here to get better clarity.