Can't pass objects returned by Observable as input component Angular 5

Question

I have a small component where I have only one input

Ts component Code

 @Input() variables;

      ngOnInit() {
        console.log(this.variables);
    }

Where I use my component TS

envVars$: Observable<{
            names: String[],
            values: {}
          }>;

Where I use my component HTML

 <app-code  [variables]="(envVars$ | async)?.values | json"></app-code>

In the console log I HAVE NULL though my object is full

It's working when I switch to <app-code>{{ (envVars$ | async)?.values | json }}</app-code> This is really weird!!!!!!!!!!!!! — Melchia
– Melchia, Commented Jan 19, 2018 at 15:45
the log says null because you're logging ON INIT before the object has been asynchronously defined. The async pipe is working exactly as intended. if you need the object to be defined on init then you need to change your structure a little. — bryan60
– bryan60, Commented Jan 19, 2018 at 16:23

bryan60 · Accepted Answer · 2018-01-19 16:25:52Z

1

the log says null because you're logging ON INIT before the object has been asynchronously defined. The async pipe is working exactly as intended. if you need the object to be defined on init then you need to change your structure a little.

do this instead to ensure the observable is populated prior to component instantiation:

<app-code *ngIf="envVars$ | async as enVars" [variables]="envVars.values | json"></app-code>

the ngIf here tells angular to not instantiate the component until envVars$ emits a value.

answered Jan 19, 2018 at 16:25

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

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

2 Comments

Melchia Over a year ago

I'll try your solution as soon as possible.

bryan60 Over a year ago

you've got something messed up somewhere along the line, check your code

Collectives™ on Stack Overflow

Can't pass objects returned by Observable as input component Angular 5

Ts component Code

Where I use my component TS

Where I use my component HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Ts component Code

Where I use my component TS

Where I use my component HTML

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related