Child component calling method of another child component

Question

Child component calling method of another child component

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have 3 components, one component A Father, Son B, and Son C

export class A Parent implements OnInit {
  constructor() { 
  }    
}

In Compose B I have a method to create user

export class B Parent implements OnInit {
  constructor() { 
}

create() {
    this.userService.create()
      .subscribe((res) => { 
        // Call other method in Component C
        //this.card.emit(null)  
      }); 
  } 

 }

And now I have a component C where I need to call the list method

export class C Parent implements OnInit {
    constructor() { 
}

ngOnInit() {
  this.getUsers();
}

getUSers() {
    this.userService.getUsers()
         .subscribe((res) => {  
            this.users = res
          }); 
    } 

}

and finally my view

    <div class="col s6">
      <list-administrators ></list-administrators>
  </div>

  <div class="col s6" *ngIf="card == 'create'">
    <create-administrator></create-administrator>
  </div>

  <div class="col s6" *ngIf="card == 'details'">
    <details-administrator></details-administrator>
  </div>

  <div class="col s6" *ngIf="card == 'edit'">
    <edit-administrator></edit-administrator>
  </div>

In component B, I have a method to create a user, when he creates it, I would like to call the other child's C listing, how can I do it?

typescript angular

asked by anonymous 24.09.2018 / 00:31

2 answers

Pagination PHP MySql What is the difference between Live Reloading and Hot Reloading

score 0 · Answer 1

I do not know if you're the best way to do this. But what you could do is. A - (Parent) B - (Son) C - (Son)

- > then the Html should look something like this:

<a>
<b (outputEmit)="emitted()" ></b>
<c #componentC></c>
</a>

In the controller of A you can declare an event and receive the creation issue in component B by executing an action on controller C.

export class A
@ViewChild('componentC') componentCElement: ElementRef;

emitted() {
    this.componentCElement.MethodQueQuerExecutar();
}

score 0 · Answer 2

Thanks Renan Degrandi, I ended up using a service, sharing the data with other components is much more efficient as it would not need to create repeated codes, so sharing .....: Service export class EventsService {

  teste = new EventEmitter<boolean>();

 constructor() { }

 getEvent(event: any) {
   this.teste.emit(event);
 }

}

With this I can exchange data with other components at runtime, now component B Component B create () { this.userService.create () .subscribe ((res) = > { ... this.eventService.getEvent (true); }); }

In this way I send there any value or desirable object and now, in my case, I can check this value and if it is true in component C, I call ngOnInit of component C to re-list the data I wanted it this way ...... Component C ngOnInit () { this.eventService.card.subscribe ((res) = > { if (res) this.getUsers (); }) this.getUsers (); }