0

I've build a service that shares data between components following the answer provided by SrAxi . All works fine until in the receiver component I implement the subscribe to the subject: the response and nothing else inside that subscribe method is showing, neither a simple console.log of a string; it is like Angular doesn't enter in that method at all.

I tried to do the subscription into OnInit, AfterViewInit and AfterContentInit: nothing changed. Also used setTimeOut(); nothing.

Then I've found the answer of Julius Dzidzevičius and then changed the subject into behaviorSuject and subscribed to it; again nothing changed.

This is driving me crazy, hope you could help

Code: Sender component

 private actionsInfoObj = {
    fromAction: null,
    showForm: null,
    data: null
};
.....
 addNewRow() {
    this.actionsInfoObj.fromAction = 'addRow';
    this.actionsInfoObj.showForm = true;
    this.bus.actionInfo(this.actionsInfoObj);
    this.addRow.emit( this.actionsInfoObj );
}

Service (ButtonsUtilitiesService)

getActionInfo$: Observable<any>;
   private getActionInfoSubject = new Subject<any>();

constructor() {
    this.getActionInfo$ = 
    this.getActionInfoSubject.asObservable();
}

actionInfo(data) {
    console.log(data);
    this.getActionInfoSubject.next(data);
}

Receiver component

constructor(
    private fb: FormBuilder,
    private bus: ButtonsUtilitiesService
) {
    this.bus.getActionInfo$.subscribe( (data: object) => {
        this.actionInfo = data;
    })
}

EDIT: forgot to say that (for now) both sender and receiver are in the same parent component:

   <section *ngIf="!showForm ">
        <div>
            <app-table (addRow)="addRow($event)"></app-table>
        </div>
    </section>
    <section *ngIf="showForm"  class="mat-elevation-z8">
        <div>
            <app-dynamic-form></app-dynamic-form>
        </div>
    </section>
Nad G
  • 507
  • 2
  • 10
  • 21
  • See this, may be it's helpful for you https://stackoverflow.com/questions/52569073/want-to-show-more-data-in-another-component-when-view-in-detail-button-is-clicke/52569837#52569837 – Ali Shahbaz Oct 04 '18 at 14:32
  • 1
    Is the sender component and receiver component are loaded in the same parent component? Because if you start emitting your data before the receiver is loaded, it will never get the emitted data in the subscription. You need to subscribe in the receiver before calling your service with subject.next() in your sender. – Quentin Fonck Oct 04 '18 at 14:38
  • @QuentinFonck yes, both are in the same parent; I've edited the post with the parent template code – Nad G Oct 04 '18 at 14:48
  • 1
    Ok thanks for the edit. I can see you are using two ngIf linked to your components. Could you try to remove the *ngIf="!showForm" and *ngIf="showForm" to see how it behave? Maybe the app-dynamic-form has not finished loading when you call `this.bus.actionInfo(this.actionsInfoObj);` and thus it's doesn't have anough time to call the subscribe before the emission. Ultimately, I would no use a subject in a service for this kind of architecture. I would use data binding by adding an output to your app-table component and an input in your app-dynamic-form. – Quentin Fonck Oct 04 '18 at 14:55
  • @QuentinFonck omg, I knew it! Yeah, that was the problem, I'm feeling so dumb! Well, better I go to learn ng routing instead of keeping using ngIf xD Thank you for your help Quentin! – Nad G Oct 04 '18 at 15:04
  • 1
    You are welcome ^^. Always keep in mind that a *ngIf directive destroys and recreates any nested components. It removes the components from the dom. Maybe move the ngIf directive into your app-dynamic-form template and display your form when `this.actionInfo` is defined. – Quentin Fonck Oct 04 '18 at 15:10
  • 1
    @QuentinFonck good advice, I'm going to do that right now! I really miss the ngShow/Hide from angularjs, despite I completely hate that framework :P Have a nice day! – Nad G Oct 04 '18 at 15:16

0 Answers0