How Applay Filter to Observable and get the length of list to count notification for each user

Question

How Applay Filter to Observable and get the length of list to count notification for each user: how can I get the count of notification type number for each user by html code


  
    
      {{ onlineusermodel.userName }}
    
    It seems logical that the
  
  
    05 min
    
      {{ getUserNotification(onlineusermodel) }}

component ts

getUserNotification(onlineUserModel: OnlineUserModel): Number {
 // var count = this.allNotifications$.subscribe((n) =>
 //   n.filter((u) => u.onlineUserModel == onlineUserModel).length
 // );
 var count = this.store
   .pipe(select(selectDirectNotifications))
   .subscribe(
     (n) => n.filter((u) => u.onlineUserModel == onlineUserModel).length
   );

 return count;
}

Reducer

const directMessagesReducerInternal = createReducer(
 initialState,
 on(
   directMessagesAction.receivedNotificationForUserAction,
   (state, { payload }) => {
     const directNotification: DirectNotification = {
       onlineUserModel: payload.onlineUserModel,
       notificationModel: payload.notificationModel,
     };
     return {
       ...state,
       allNotifications: [...state.allNotifications, directNotification],
     };
   }
 ),

state

allNotifications: DirectNotification[];

selector

export const selectDirectNotifications = createSelector(
 selectDirectMessageStore,
 (state: DirectMessagesState) => state.allNotifications
);

Action

export const receivedNotificationForUserAction = createAction(
 "[DN] RECEIVED_DIRECT_NOTIFICATION",
 props<{ payload: ReceivedNotificationForUserDto }>()
);

user_15159603 · Answer

Not Recommended Way: You can achieve that by returning the Observable instead of subscribing to it from getUserNotification, then subscribe to it in the template using the async pipe, like the following:

getUserNotification(onlineUserModel: OnlineUserModel): Observable {
  return this.store.pipe(
    select(selectDirectNotifications),
    map((n) => n.filter((u) => u.onlineUserModel == onlineUserModel).length)
  );
}


  
    
      {{ onlineusermodel.userName }}
    
    It seems logical that the
  
  
    05 min
    
      {{ getUserNotification(onlineusermodel) | async }}

However, it's not recommended to use the functions directly in the component template (HTML file), because Angular will call it on each change detection, which is not preferred from the performance point of view.

Instead, the recommended way is to assign the value of getUserNotification to an Observable once the data is ready and then subscribe to that Observable in the component template, like the following:

ngOnInit(): void {
  // ngOnInit is used here as an example.
  // You can assing the result of `getUserNotification` function each time the `onlineUserModel` has been changed:
  this.userNotificationCount$ = this.getUserNotification(onlineUserModel);
}

getUserNotification(onlineUserModel: OnlineUserModel): Observable {
  return this.store.pipe(
    select(selectDirectNotifications),
    map((n) => n.filter((u) => u.onlineUserModel == onlineUserModel).length)
  );
}


  
    
      {{ onlineusermodel.userName }}
    
    It seems logical that the
  
  
    05 min
    
      {{ userNotificationCount | async }}

How Applay Filter to Observable and get the length of list to count notification for each user

1 Answers