Angular async pipe to Input property in child component not being set

Question

It seems like the child component only gets set the first time the Observable emits.

Container component (map operator added for debugging):

this.form$ = this.createOrderStore.pipe(select(getFormGroup)).pipe(
  tap((val) => {
    console.log('observable emitted');
    console.log(val);
    return val;
  })
);

Child component:

private _form: FormGroup;
@Input()
set form(val) {
  console.log('set form');
  if (val) {
    this._form = val;
  }
}
get form() {
  return this._form;
}

Container template:

<app-order-form [form]="form$ | async"></app-order-form>

The first time the observable emits, console shows 'observable emitted', val is undefined, then 'set form'. However, since this first value is undefined, we don't set it in the template yet.

The second time the observable emits, console logs 'observable emitted', val is a complete form group (so it should trigger change detection), but 'set form' is not logged. This second value is the one I actually need to set in the template.

Is there a reason why the child component property is only set the first time the observable emits?

You don't actually set the form more than once; when the Observable emits, it doesn't set the form. You should use the async pipe in the child template — Explosion Pills
– Explosion Pills, Commented Feb 1, 2019 at 17:21
it should fire. Are you sure the second one contains something, because angular checks by reference if it should update and undefined === undefined, so it won't enter the set function? try logging it in the observable (btw, for logging you can use tap, no need to return anything from that) — Poul Kruijt
– Poul Kruijt, Commented Feb 1, 2019 at 17:22
@PierreDuc I did what you suggested and edited the question. For sure the second time is the real value — Sean Ivins
– Sean Ivins, Commented Feb 1, 2019 at 17:26
Don't know why it doesn't work. But if you just need the second one, you can add a filter to the form$ obs: .pipe(filter((form) => !!form)). Still doesn't explain it though — Poul Kruijt
– Poul Kruijt, Commented Feb 1, 2019 at 17:28
@PierreDuc So interestingly enough, I added the filter operator like you suggested, and 'set form' is still logged the first time like the filter didn't prevent the value from being emitted even though form is definitely undefined. I'm really blown away here... — Sean Ivins
– Sean Ivins, Commented Feb 1, 2019 at 17:31

Poul Kruijt · Accepted Answer · 2019-02-01 17:49:28Z

2

I believe your issue only happens when you have the ChangeDetectionStrategy to OnPush. You are setting the this.form$ probably in the ngAfterViewInit hook, because of the getFormGroup method, am I right? There are two ways around this.

Easy way, using the ChangeDetectorRef

Container component:

constructor(readonly cd: ChangeDetectorRef) {}

ngAfterViewInit(): void {
   // ...

   this.form$ = this.createOrderStore.pipe(select(getFormGroup));
   this.cd.markForCheck();
}

Another way is to use a Subject, to update the formGroup, and have the forms$ already be defined at class construction using

formGroup$ = new ReplaySubject<FormGroup>(1);

readonly form$ = this.formGroup$.pipe(
  mergeMap((formGroup) => this.createOrderStore.pipe(
    select(formGroup)
  ))
);

ngAfterViewInit(): void {
   // ...
   this.formGroup$.next(getFormGroup);
}

Just to clear up what happens in your code at the moment is that the form$ property on the container component is undefined. That's the undefined you are logging in your child component, and because you are setting the form$ inside the ngAfterViewInit hook, it does not get picked up by the change detector, unless you specifically tell it to go check

answered Feb 1, 2019 at 17:49

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sean Ivins Over a year ago

Change detection strategy is default. I really don't want to have to do all this for something that's supposed to work the way I have it... I'm working on a stackblitz right now and hopefully I can reproduce it because I'm starting to feel like this may be a bug

Poul Kruijt Over a year ago

@SeanIvins I haven't used angular without OnPush for a while anymore, so it could be that the same issue persist, just because you are setting it inside the life cycle hook. But if you do not use OnPush, I can only imagine that wrapping it inside a setTimeout(() => this.form$ = this.createOrderStore.pipe(select(getFormGroup))) will also work

Poul Kruijt Over a year ago

@SeanIvins I've checked the docs, and yes, setting a property inside the ngAfterViewInit will require a second change detection cycle to be picked up

Sean Ivins Over a year ago

I am setting the property in constructor. I have created a stackblitz that is basically exactly how I'm doing it, and it works... stackblitz.com/edit/angular-ccli97 I wish I could see what I'm doing wrong in my app

Poul Kruijt Over a year ago

are you sure you have no typo forms$ | async vs form$ | async?

|

Collectives™ on Stack Overflow

Angular async pipe to Input property in child component not being set

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related