CODEWITHSUNDEEP
angular
jojemapa
jojemapa

Reputation: 903

How to communicate components in Angular 2

I'm building an application with Angular 2 (in its most recent version), and I want to communicate between components.enter image description here

This is my workspace:

src
    app
        navbar
            navbar.component.ts
        footer
            footer.component.ts
        section
            dashboard
                dashboard.component.ts
            section.component.html
            section.component.ts
            section.module.ts
        sidebar
            sidebar.component.ts
        app.component.html
        app.module.ts
    assets

I want to call from the dashboard.component.ts a method in the footer.component.ts.

This is my code:

footer.component.ts

export class FooterComponent implements OnInit {

  ngOnInit() {

  }

  walking(){
    console.log("Method of called walking");
  }

}

dashboard.component.ts

export class DashboardComponent implements OnInit {

  ngOnInit() {

  }

  callWalking(){
    console.log("Call to walking method");
  }

}

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    SectionComponent,
    SidebarComponent,
    NavbarComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    SectionModule,
    RouterModule.forRoot([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<app-navbar></app-navbar>
<app-sidebar></app-sidebar>
<app-section></app-section>
<app-footer></app-footer>

section.module.ts

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(
      [
        { path: 'dashboard', component: DashboardComponent },
        { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
        { path: '**', component: DashboardComponent }
      ]
    )
  ],
  declarations: [DashboardComponent]
})
export class SectionModule { }

section.component.html

<router-outlet></router-outlet>

I literally want to call the "walk ()" method of component "footer.component.ts" from component dashboard.component.ts

How to call the "footer component> walk ()" method from the panel component method> callWalking ()?

In Java Android I can use static methods or implement buses for the communication of activities or fragments, in angular I do not know what I can do

Upvotes: 1

Views: 507

Answers (2)

jojemapa
jojemapa

Reputation: 903

Build an Angular service to manage communication.

1. Create a service

import { Injectable, Output,EventEmitter } from '@angular/core';

@Injectable()
export class TestService {



@Output() event$:EventEmitter<boolean>=new EventEmitter();

  constructor() { 

  }

  setEventEmitter(enable:boolean) {
      this.event$.next(enable);
  }

  getEventEmitter() {
     return this.event$;
  }  

}

2. Set providers in app.module (Main module)

....

providers: [TestService],

bootstrap: [AppComponent]

....

3. Emit event

constructor(private ls: TestService) { }

ngOnInit() {
      this.ls.setEventEmitter(true);  
}

4. Receive event

constructor(private ls: TestService) { }

ngOnInit() {
  this.ls.getEventEmitter().subscribe(e => {
        if(e != null) {
            console.log("Code here");
        }
    });  
}

Upvotes: 0

DeborahK
DeborahK

Reputation: 60518

One option is to add @input and @output properties on the components. Then data can be passed from a component to its parent using an @output property and the parent can pass the info on to one of the other child components using its @input property.

A second option is to build an Angular service to manage the communication. Any component can call methods in the service and the other components can bind to service properties.

Upvotes: 2

Related Questions