CODEWITHSUNDEEP
angularsignalsngrx-store
Bartek
Bartek

Reputation: 103

Angular input signal from ngrx observable

I have such observable from ngrx store

 public toolbarConfig$: Observable<ToolbarKendoState> = this.store$.select(GetProductToolbarConfig);

then I would like to subscribe to it here

 <lib-product-config-toolbar [toolbarCustomConfig]="toolbarConfig$ | async"></lib-product-config-toolbar>

and in the end I would normally use it like this in proper component

 @Input() toolbarCustomConfig: ToolbarKendoState | null = null;

but i want to use input signal instead of @Input decorator and using it like this doest not work(I dont have value from input (with old approach it works of course))

  toolbarCustomConfig = input()

What am i missing ?

Upvotes: 2

Views: 231

Answers (2)

Naren Murali
Naren Murali

Reputation: 56054

You can also convert the observable to a signal using toSignal and get rid of the async pipe, working example below!

MAIN

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { ChildComponent } from './app/child/child.component';
import { AsyncPipe } from '@angular/common';
import { interval, map } from 'rxjs';
import { toSignal } from '@angular/core/rxjs-interop';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChildComponent, AsyncPipe],
  template: `
    <app-child [toolbarCustomConfig]="toolbarConfig()"/>
  `,
})
export class App {
  public toolbarConfig: any = toSignal(
    interval(1000).pipe(map((x) => ({ innerProp: Math.random() })))
  );
}

bootstrapApplication(App);

CHILD

import { CommonModule } from '@angular/common';
import { Component, Input, input } from '@angular/core';

@Component({
  selector: 'app-child',
  standalone: true,
  imports: [CommonModule],
  template: `
    child: {{toolbarCustomConfig() | json}} <!-- when using signal you must execute () the signal! -->
  `,
})
export class ChildComponent {
  // @Input() toolbarCustomConfig: any | null = null;
  toolbarCustomConfig = input<string>();
}

Stackblitz Demo

Upvotes: 1

Tib&#232;re B.
Tib&#232;re B.

Reputation: 1191

Without proper details on what's failing it's give you an answer that will fit your use case, but I was able to produce a minimal example that seems to be working fine, maybe this can help you resolve your problem ?

https://stackblitz.com/edit/stackblitz-starters-caivbu?file=src%2Fmain.ts

Upvotes: 0

Related Questions