NareshAtnPLUS

<div class="content" fxLayout="row wrap" fxLayoutGap="16px grid">
  <div fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let num of [1,2,3,4,5,6,7]">
    <mat-card class="mat-elevation-z4" >
      <mat-card-header>
        <mat-card-title>Mountains {{num}}</mat-card-title>
      </mat-card-header>
      <img mat-card-image src="./../assets/images/mountains.jpg">
      <mat-card-content>
        <p>
          The Himalayas is a mountain range in Asia.

NareshAtnPLUS

import { createFeatureSelector, createSelector } from '@ngrx/store';
import * as fromTodo from "./todo.reducer";

/*select the feature state for creating the selectors 
this can be done by using the feature key initated the feature.reducer.ts
*/
export const selectTodoFeatureState = createFeatureSelector<fromTodo.State>(
  fromTodo.todoFeatureKey
)
/* 

NareshAtnPLUS

import { Action, createReducer, on } from '@ngrx/store';
import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';
import { Todo } from './todo.model';
import * as TodoActions from './todo.actions';
export const todoFeatureKey = 'todos';
import * as fromRoot from '../../app-state/app-state';

// Create entitity state interface for the ngrx entity
export interface State extends EntityState<Todo> {
  // additional entities state properties

NareshAtnPLUS

export interface Todo {
  _id?:string;
  title:string;
  description:string;
  dateLimit:Date;
  priority:string;
}
export interface AddTodoResponse{
  success:boolean,
  message:string,

NareshAtnPLUS

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import * as TodoActions from './todo.actions'
import { TodoService } from '../services/todo.service';
import { map, concatMap,exhaustMap, catchError, tap } from 'rxjs/operators';
import { of } from 'rxjs';


@Injectable()
export class TodoEffects {

NareshAtnPLUS

import { createAction, props } from '@ngrx/store';
import { Update } from '@ngrx/entity';

import { Todo, AddTodoResponse } from './todo.model';
export const loadTodos = createAction(
  '[Todo/API] Load Todos',
)
export const loadTodosSuccess = createAction(
  '[Todo/API] Load Todos Success',
  props<{ todos: Todo[] }>()

NareshAtnPLUS

import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import * as fromTodo from '../store/todo.reducer'
import * as TodoActions from '../store/todo.actions'
import * as TodoSelectors from '../store/todo.selectors'
import { Observable } from 'rxjs';
import { Todo } from '../store/todo.model';
import { TodoService } from '../services/todo.service';
import { map } from 'rxjs/operators';
@Component({