Styjun

I have a CommentBoxComponent that displays all the comments of the post in the containing PostComponent. I'm getting the id of the post from the containing parent component via an @Input field.

The idea of the CommentBoxComponent is to display a CommentComponent for each of the comments of the post.

I'm trying to achieve that by writing a lazy selector that will receive the id of the post and return the filtered comments.

The problem is that while I'm setting the lazy selector in the component's constructor, the input id has not been set yet.

If I try setting the lazy selector in ngOnChanges, it's already too late, and the selection has already taken place.

Here's the component's code:

@Component( ... )
export class CommentBoxComponent 
 @Input() 
 post: Post;

 comments$: Observable<Comment[]>; 

 constructor(private store: Store) 
 let filter = filterFn => filterFn(this.post.id); // this.post is undefined at this stage

 this.comments$ = this.store.select(CommentState.postComments).pipe(map(filter));
 

Here's the selector's code:

@Selector()
static postComments(state: CommentStateModel) 
 return (postId: string) => 
 return state.comments.filter(comment => comments.postId === postId);
 ;

Any suggestions ?

You should just be able to use ngOnInit here to initialise comments$.

When it is called, any @Input bindings will be completed so the value for this.post will be set.

ngOnInit() 
 this.comments$ = this.store.select(CommentState.postComments)
 .pipe(
 map(fn => fn(this.post.id))
 );

Lifecycle details here OnInit

I found the bug, so I'm sharing here in case anyone's interested.

I was wrong to assume that calling store.select after the construction doesn't work (it just hit me that there's no reason for it to be any different than calling it during ngOnChanges).

It turns out that the selection was working just fine, but the reason I didn't get any results was that I didn't dispatch a FetchComments action before the selection.
That means that I always got 0 commens back ...

I just want to clarify that in such a case, the correct place to do the selection, is either in the setter of the @Input or during ngOnChanges where you can verify that the value of the input is valid.

If you try to place the selection in ngOnInit, the @Input might not have been initialized yet in case of an asynchronoud initialization.