I am trying to render an observable with the async pipe :

bookmarks$ : Observable<Bookmark[]>;
<mat-list-item *ngFor="let bookmark of bookmarks$ | async">

It does work when I serve the app, but it does not work when I launch storybook : it displays nothing.

This is the component :

export class BookmarkListComponent {

  bookmarks$ : Observable<Bookmark[]>;
  state=false;

  constructor(private bookmarksService : BookmarksService,private _snackBar: MatSnackBar, private store:Store<fromBookmarkReducers.State>) {
    this.bookmarks$ = this.store.pipe(select(fromBookmarkSelectors.selectAll));
   }

  @Output() click: EventEmitter<void> = new EventEmitter();

  onDelete(bookmark:Bookmark) {
    this.store.dispatch(new fromBookmarkActions.DeleteBookmark(bookmark.id));
  }

  onclick(){
    this.click.emit();
    }

  @Input()
  backgroundColor?:string;

  @Input()
  Color: 'white' | 'black';

}

And this is the template :

<div class="list" [ngStyle]="{'background-color':backgroundColor}">
        <h3>Bookmarks</h3>
        <mat-nav-list role="navigation">
            
            <p class="paragraphe" *ngIf="state">No bookmarks...</p>
            
            <mat-list-item *ngFor="let bookmark of bookmarks$ | async">
              
                <a matLine class="border" [ngStyle]="{'color':Color}" (click)="onclick()">{{bookmark.name}} , {{bookmark.code}}, {{bookmark.id}}</a>
                <button mat-icon-button (click)="onDelete(bookmark)">
                    <mat-icon>delete_outline</mat-icon>
                </button>
                
            </mat-list-item>
            
        </mat-nav-list>

Maybe I have to add an import to my stories file but I don’t know…