How to share data between two component?

Question

I'm using angular 4,im not able to communicate with component.I have sidenav component and I want to share values sidebar to main component. Thanks.

Answer 1

There's many ways. For example:

- @Output/@Input
- Service

In fact, there's even a whole section in Angular docs devoted to it:

https://angular.io/guide/component-interaction

Answer 2

You can create a service and add it to providers at app level (root) this way the service will be available to inject to all the component and any change on this service will be persist.

@Injectable()
export class GlobalSharedService {
  public data:any;
}

app.module

@NgModule({
  ....
  providers: [GlobalSharedService]
})
export class AppModule { }

In Angular 6 you can add the service to proviers at the app.module level like this

@Injectable({
  providedIn: 'root',
})
export class GlobalSharedService {
   public data:any;
  }

All service added at the app.module the created once that why the persist there state and called singleton service

Answer 3

sidenav.component.ts
passData:any

sidenav.component.html
//Call your main component & share passData property
<app-component [passData]="passData"></app-component>

main.component.ts
@ViewChild(passData) passData: SidenavComponent;