[{"data":1,"prerenderedAt":2762},["ShallowReactive",2],{"blog-\u002Fblog\u002Fangular\u002Fakita\u002Fakitastatemanagement":3},{"id":4,"title":5,"body":6,"date":2751,"description":2752,"extension":2753,"meta":2754,"navigation":163,"path":2755,"seo":2756,"stem":2757,"tags":2758,"__hash__":2761},"blog\u002Fblog\u002Fangular\u002FAkita\u002FAkitaStateManagement.md","Getting started with Akita Store",{"type":7,"value":8,"toc":2745},"minimark",[9,27,32,41,45,53,57,60,67,74,77,86,89,95,102,108,111,117,125,131,134,149,317,324,424,442,509,519,664,670,962,969,1220,1223,1226,1232,1239,1688,1694,2355,2362,2368,2375,2555,2562,2729,2733,2741],[10,11,12,13,20,21,26],"p",{},"Having a proper state management is crucial for enterprise applications and user experience. If you are building a small application then you can skip a dedicated state management library and Angular will provide you with enough options to maitain app state. Recently i explored ",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fopensource.salesforce.com\u002Fakita\u002F",[18],"nofollow","Akita"," a state management library for Javascript created by Salesforce. So instead of just going through documentation and understanding the concepts, i decided to create a Todo app. You can find the complete source code on my ",[14,22,25],{"href":23,"rel":24},"https:\u002F\u002Fgithub.com\u002Fabdulrehman2\u002Fakita-todo-app",[18],"Github account",". Akita lets you focus more on feature development than writing a lot of boilerplate code. First let's learn building blocks of Akita.",[28,29,31],"h2",{"id":30},"_1-store","1 Store",[10,33,34,35,40],{},"In Akita, a store is just a like a database table, where you can store records for an entity. You can consider store as a place where you can keep entities to avoid having requesting same data from backend. Unlike ",[14,36,39],{"href":37,"rel":38},"https:\u002F\u002Fredux.js.org\u002F",[18],"Redux",", Akita support multiple stores. We can have store for each entity.",[28,42,44],{"id":43},"_2-query","2 Query",[10,46,47,48,52],{},"In Akita, a query is a class that offers you the ability to query a Akita ",[49,50,51],"code",{},"store",". Akita provides helper methods that can be used to filter entities in the store. Akita also enables to get data from different stores by joining different queries.",[28,54,56],{"id":55},"_3-service","3 Service",[10,58,59],{},"A service is a class that exposes different methods that will allow the client code to make changes in the store. You can add, update, delete data in store by writing custom functions in service. Also you can connect your service class with backend API to fetch the records and load them in the store.",[10,61,62],{},[63,64],"img",{"alt":65,"src":66},"","\u002Fblog\u002Fangular\u002FAkita\u002Fakita-state-management.png",[10,68,69,70],{},"           ",[71,72,73],"em",{},"Here is a diagram that summarize above concpets.",[10,75,76],{},"Enough of theory let jump in to writing building the app.First create an angular app. I am currently using angualr CLI 14.",[78,79,84],"pre",{"className":80,"code":82,"language":83},[81],"language-text","ng new todo \n","text",[49,85,82],{"__ignoreMap":65},[10,87,88],{},"Install the akita library with version number 6.1.3 as this version works fine with angular 14.",[78,90,93],{"className":91,"code":92,"language":83},[81],"ng add @datoroma\u002Fakita@6.1.3\n",[49,94,92],{"__ignoreMap":65},[10,96,97,98,101],{},"Also downgrade the version of ",[49,99,100],{},"rxjs"," library as follows.",[78,103,106],{"className":104,"code":105,"language":83},[81],"npm install rxjs@6.6.0\n",[49,107,105],{"__ignoreMap":65},[10,109,110],{},"Also install the angular material and bootstrap to create the Todo app UI.",[78,112,115],{"className":113,"code":114,"language":83},[81],"npm install @angular\u002Fmaterial\nnpm install bootstrap\n",[49,116,114],{"__ignoreMap":65},[10,118,119,120,124],{},"Configure the boostrap in ",[121,122,123],"strong",{},"angular.json"," file by adding css class  in architect\u002Fbuild\u002Foptions\u002Fstyles.",[78,126,129],{"className":127,"code":128,"language":83},[81],"\"styles\": [\".\u002Fnode_modules\u002Fbootstrap\u002Fdist\u002Fcss\u002Fbootstrap.css\"]\n",[49,130,128],{"__ignoreMap":65},[10,132,133],{},"Now we are good to go. Lets add some more code",[10,135,136,137,140,141,144,145,148],{},"Create a folder with name ",[121,138,139],{},"state"," at path app\u002Fsrc. Add a file name ",[121,142,143],{},"todo.model.ts"," with following content. This will be the model of ",[121,146,147],{},"Todo",".",[78,150,154],{"className":151,"code":152,"language":153,"meta":65,"style":65},"language-typescript shiki shiki-themes github-light github-dark","\nexport type Todo = {\n  id: string;\n  title: string;\n  completed: boolean;\n};\n\nexport function createTodo(title: string) {\n  return {\n    id: guid(),\n    title,\n    completed: false\n  } as Todo;\n}\n","typescript",[49,155,156,165,186,203,215,228,234,239,263,271,283,289,298,311],{"__ignoreMap":65},[157,158,161],"span",{"class":159,"line":160},"line",1,[157,162,164],{"emptyLinePlaceholder":163},true,"\n",[157,166,168,172,175,179,182],{"class":159,"line":167},2,[157,169,171],{"class":170},"szBVR","export",[157,173,174],{"class":170}," type",[157,176,178],{"class":177},"sScJk"," Todo",[157,180,181],{"class":170}," =",[157,183,185],{"class":184},"sVt8B"," {\n",[157,187,189,193,196,200],{"class":159,"line":188},3,[157,190,192],{"class":191},"s4XuR","  id",[157,194,195],{"class":170},":",[157,197,199],{"class":198},"sj4cs"," string",[157,201,202],{"class":184},";\n",[157,204,206,209,211,213],{"class":159,"line":205},4,[157,207,208],{"class":191},"  title",[157,210,195],{"class":170},[157,212,199],{"class":198},[157,214,202],{"class":184},[157,216,218,221,223,226],{"class":159,"line":217},5,[157,219,220],{"class":191},"  completed",[157,222,195],{"class":170},[157,224,225],{"class":198}," boolean",[157,227,202],{"class":184},[157,229,231],{"class":159,"line":230},6,[157,232,233],{"class":184},"};\n",[157,235,237],{"class":159,"line":236},7,[157,238,164],{"emptyLinePlaceholder":163},[157,240,242,244,247,250,253,256,258,260],{"class":159,"line":241},8,[157,243,171],{"class":170},[157,245,246],{"class":170}," function",[157,248,249],{"class":177}," createTodo",[157,251,252],{"class":184},"(",[157,254,255],{"class":191},"title",[157,257,195],{"class":170},[157,259,199],{"class":198},[157,261,262],{"class":184},") {\n",[157,264,266,269],{"class":159,"line":265},9,[157,267,268],{"class":170},"  return",[157,270,185],{"class":184},[157,272,274,277,280],{"class":159,"line":273},10,[157,275,276],{"class":184},"    id: ",[157,278,279],{"class":177},"guid",[157,281,282],{"class":184},"(),\n",[157,284,286],{"class":159,"line":285},11,[157,287,288],{"class":184},"    title,\n",[157,290,292,295],{"class":159,"line":291},12,[157,293,294],{"class":184},"    completed: ",[157,296,297],{"class":198},"false\n",[157,299,301,304,307,309],{"class":159,"line":300},13,[157,302,303],{"class":184},"  } ",[157,305,306],{"class":170},"as",[157,308,178],{"class":177},[157,310,202],{"class":184},[157,312,314],{"class":159,"line":313},14,[157,315,316],{"class":184},"}\n",[10,318,319,320,323],{},"We can also save the UI state in store as well. So Let's have a visibility filter that will allow us to filter Todo list based on the selected filter. Create a file name ",[121,321,322],{},"visibility.filter.ts"," as follows.",[78,325,327],{"className":151,"code":326,"language":153,"meta":65,"style":65},"export enum VISIBILITY_FILTER {\n    SHOW_COMPLETED = 'SHOW_COMPLETED',\n    SHOW_ACTIVE = 'SHOW_ACTIVE',\n    SHOW_ALL = 'SHOW_ALL'\n}\n\nexport type TodoFilter = {\n    label: string;\n    value: VISIBILITY_FILTER;\n};\n",[49,328,329,341,355,367,377,381,385,398,409,420],{"__ignoreMap":65},[157,330,331,333,336,339],{"class":159,"line":160},[157,332,171],{"class":170},[157,334,335],{"class":170}," enum",[157,337,338],{"class":177}," VISIBILITY_FILTER",[157,340,185],{"class":184},[157,342,343,346,348,352],{"class":159,"line":167},[157,344,345],{"class":198},"    SHOW_COMPLETED",[157,347,181],{"class":170},[157,349,351],{"class":350},"sZZnC"," 'SHOW_COMPLETED'",[157,353,354],{"class":184},",\n",[157,356,357,360,362,365],{"class":159,"line":188},[157,358,359],{"class":198},"    SHOW_ACTIVE",[157,361,181],{"class":170},[157,363,364],{"class":350}," 'SHOW_ACTIVE'",[157,366,354],{"class":184},[157,368,369,372,374],{"class":159,"line":205},[157,370,371],{"class":198},"    SHOW_ALL",[157,373,181],{"class":170},[157,375,376],{"class":350}," 'SHOW_ALL'\n",[157,378,379],{"class":159,"line":217},[157,380,316],{"class":184},[157,382,383],{"class":159,"line":230},[157,384,164],{"emptyLinePlaceholder":163},[157,386,387,389,391,394,396],{"class":159,"line":236},[157,388,171],{"class":170},[157,390,174],{"class":170},[157,392,393],{"class":177}," TodoFilter",[157,395,181],{"class":170},[157,397,185],{"class":184},[157,399,400,403,405,407],{"class":159,"line":241},[157,401,402],{"class":191},"    label",[157,404,195],{"class":170},[157,406,199],{"class":198},[157,408,202],{"class":184},[157,410,411,414,416,418],{"class":159,"line":265},[157,412,413],{"class":191},"    value",[157,415,195],{"class":170},[157,417,338],{"class":177},[157,419,202],{"class":184},[157,421,422],{"class":159,"line":273},[157,423,233],{"class":184},[10,425,426,427,430,431,434,435,437,438,441],{},"Now create a file name ",[121,428,429],{},"todos.state.ts",". This is the file that will hold the entity and any extended state that needs to be stored. The state extends the ",[49,432,433],{},"EntityState"," from akita with our app model ",[49,436,147],{},". We can also add more properties to the state, for example to save the state of selected filter we can properties in ",[49,439,440],{},"ui"," object like below.",[78,443,445],{"className":151,"code":444,"language":153,"meta":65,"style":65},"\nexport interface TodosState extends EntityState\u003CTodo, string> {\n    ui: {\n        filter: VISIBILITY_FILTER\n    };\n}\n",[49,446,447,451,481,490,500,505],{"__ignoreMap":65},[157,448,449],{"class":159,"line":160},[157,450,164],{"emptyLinePlaceholder":163},[157,452,453,455,458,461,464,467,470,472,475,478],{"class":159,"line":167},[157,454,171],{"class":170},[157,456,457],{"class":170}," interface",[157,459,460],{"class":177}," TodosState",[157,462,463],{"class":170}," extends",[157,465,466],{"class":177}," EntityState",[157,468,469],{"class":184},"\u003C",[157,471,147],{"class":177},[157,473,474],{"class":184},", ",[157,476,477],{"class":198},"string",[157,479,480],{"class":184},"> {\n",[157,482,483,486,488],{"class":159,"line":188},[157,484,485],{"class":191},"    ui",[157,487,195],{"class":170},[157,489,185],{"class":184},[157,491,492,495,497],{"class":159,"line":205},[157,493,494],{"class":191},"        filter",[157,496,195],{"class":170},[157,498,499],{"class":177}," VISIBILITY_FILTER\n",[157,501,502],{"class":159,"line":217},[157,503,504],{"class":184},"    };\n",[157,506,507],{"class":159,"line":230},[157,508,316],{"class":184},[10,510,511,512,515,516,518],{},"Now let's create a store with file name ",[121,513,514],{},"todos.store.ts",", that will be responsible to hold our data in browser. To create  a store you need to provide a ",[49,517,139],{},", so in our case it will 'TodoState' created earlier. We can also provide an initial state as well when initializing the store so by default we are setting the filter to show all Todo's.",[78,520,522],{"className":151,"code":521,"language":153,"meta":65,"style":65},"\nconst initialState = {\n  ui: {\n    filter: VISIBILITY_FILTER.SHOW_ALL\n  }\n};\n\n@Injectable({\n  providedIn: 'root'\n})\n\n@StoreConfig({ name: 'todos' })\nexport class TodosStore extends EntityStore\u003CTodosState> {\n  constructor() {\n    super(initialState);\n  }\n}\n",[49,523,524,528,540,545,558,563,567,571,582,590,595,599,615,637,645,654,659],{"__ignoreMap":65},[157,525,526],{"class":159,"line":160},[157,527,164],{"emptyLinePlaceholder":163},[157,529,530,533,536,538],{"class":159,"line":167},[157,531,532],{"class":170},"const",[157,534,535],{"class":198}," initialState",[157,537,181],{"class":170},[157,539,185],{"class":184},[157,541,542],{"class":159,"line":188},[157,543,544],{"class":184},"  ui: {\n",[157,546,547,550,553,555],{"class":159,"line":205},[157,548,549],{"class":184},"    filter: ",[157,551,552],{"class":198},"VISIBILITY_FILTER",[157,554,148],{"class":184},[157,556,557],{"class":198},"SHOW_ALL\n",[157,559,560],{"class":159,"line":217},[157,561,562],{"class":184},"  }\n",[157,564,565],{"class":159,"line":230},[157,566,233],{"class":184},[157,568,569],{"class":159,"line":236},[157,570,164],{"emptyLinePlaceholder":163},[157,572,573,576,579],{"class":159,"line":241},[157,574,575],{"class":184},"@",[157,577,578],{"class":177},"Injectable",[157,580,581],{"class":184},"({\n",[157,583,584,587],{"class":159,"line":265},[157,585,586],{"class":184},"  providedIn: ",[157,588,589],{"class":350},"'root'\n",[157,591,592],{"class":159,"line":273},[157,593,594],{"class":184},"})\n",[157,596,597],{"class":159,"line":285},[157,598,164],{"emptyLinePlaceholder":163},[157,600,601,603,606,609,612],{"class":159,"line":291},[157,602,575],{"class":184},[157,604,605],{"class":177},"StoreConfig",[157,607,608],{"class":184},"({ name: ",[157,610,611],{"class":350},"'todos'",[157,613,614],{"class":184}," })\n",[157,616,617,619,622,625,627,630,632,635],{"class":159,"line":300},[157,618,171],{"class":170},[157,620,621],{"class":170}," class",[157,623,624],{"class":177}," TodosStore",[157,626,463],{"class":170},[157,628,629],{"class":177}," EntityStore",[157,631,469],{"class":184},[157,633,634],{"class":177},"TodosState",[157,636,480],{"class":184},[157,638,639,642],{"class":159,"line":313},[157,640,641],{"class":170},"  constructor",[157,643,644],{"class":184},"() {\n",[157,646,648,651],{"class":159,"line":647},15,[157,649,650],{"class":198},"    super",[157,652,653],{"class":184},"(initialState);\n",[157,655,657],{"class":159,"line":656},16,[157,658,562],{"class":184},[157,660,662],{"class":159,"line":661},17,[157,663,316],{"class":184},[10,665,666,667],{},"The next step is to add the a Query that will allow us to fetch the saved records. Create a file name ",[121,668,669],{},"todos.query.ts",[78,671,673],{"className":151,"code":672,"language":153,"meta":65,"style":65},"\n@Injectable({\n    providedIn: 'root'\n})\nexport class TodosQuery extends QueryEntity\u003CTodosState> {\n\n    selectVisibilityFilter$ = this.select(state => state.ui.filter);\n    $allTodos = this.selectAll();\n\n    selectVisibleTodos$ = combineLatest([this.selectVisibilityFilter$,  this.selectAll()], (filter, todos) => {\n        switch (filter) {\n            case VISIBILITY_FILTER.SHOW_COMPLETED:\n                return todos.filter(t => t.completed);\n            case VISIBILITY_FILTER.SHOW_ACTIVE:\n                return todos.filter(t => !t.completed);\n            default:\n                return todos;\n        }\n    });\n\n    constructor(protected override store: TodosStore) {\n        super(store);\n    }\n}\n\n",[49,674,675,679,687,694,698,718,722,747,764,768,812,820,835,855,868,888,895,902,908,914,919,942,951,957],{"__ignoreMap":65},[157,676,677],{"class":159,"line":160},[157,678,164],{"emptyLinePlaceholder":163},[157,680,681,683,685],{"class":159,"line":167},[157,682,575],{"class":184},[157,684,578],{"class":177},[157,686,581],{"class":184},[157,688,689,692],{"class":159,"line":188},[157,690,691],{"class":184},"    providedIn: ",[157,693,589],{"class":350},[157,695,696],{"class":159,"line":205},[157,697,594],{"class":184},[157,699,700,702,704,707,709,712,714,716],{"class":159,"line":217},[157,701,171],{"class":170},[157,703,621],{"class":170},[157,705,706],{"class":177}," TodosQuery",[157,708,463],{"class":170},[157,710,711],{"class":177}," QueryEntity",[157,713,469],{"class":184},[157,715,634],{"class":177},[157,717,480],{"class":184},[157,719,720],{"class":159,"line":230},[157,721,164],{"emptyLinePlaceholder":163},[157,723,724,727,729,732,734,737,739,741,744],{"class":159,"line":236},[157,725,726],{"class":191},"    selectVisibilityFilter$",[157,728,181],{"class":170},[157,730,731],{"class":198}," this",[157,733,148],{"class":184},[157,735,736],{"class":177},"select",[157,738,252],{"class":184},[157,740,139],{"class":191},[157,742,743],{"class":170}," =>",[157,745,746],{"class":184}," state.ui.filter);\n",[157,748,749,752,754,756,758,761],{"class":159,"line":241},[157,750,751],{"class":191},"    $allTodos",[157,753,181],{"class":170},[157,755,731],{"class":198},[157,757,148],{"class":184},[157,759,760],{"class":177},"selectAll",[157,762,763],{"class":184},"();\n",[157,765,766],{"class":159,"line":265},[157,767,164],{"emptyLinePlaceholder":163},[157,769,770,773,775,778,781,784,787,789,791,793,796,799,801,804,807,810],{"class":159,"line":273},[157,771,772],{"class":191},"    selectVisibleTodos$",[157,774,181],{"class":170},[157,776,777],{"class":177}," combineLatest",[157,779,780],{"class":184},"([",[157,782,783],{"class":198},"this",[157,785,786],{"class":184},".selectVisibilityFilter$,  ",[157,788,783],{"class":198},[157,790,148],{"class":184},[157,792,760],{"class":177},[157,794,795],{"class":184},"()], (",[157,797,798],{"class":191},"filter",[157,800,474],{"class":184},[157,802,803],{"class":191},"todos",[157,805,806],{"class":184},") ",[157,808,809],{"class":170},"=>",[157,811,185],{"class":184},[157,813,814,817],{"class":159,"line":285},[157,815,816],{"class":170},"        switch",[157,818,819],{"class":184}," (filter) {\n",[157,821,822,825,827,829,832],{"class":159,"line":291},[157,823,824],{"class":170},"            case",[157,826,338],{"class":198},[157,828,148],{"class":184},[157,830,831],{"class":198},"SHOW_COMPLETED",[157,833,834],{"class":184},":\n",[157,836,837,840,843,845,847,850,852],{"class":159,"line":300},[157,838,839],{"class":170},"                return",[157,841,842],{"class":184}," todos.",[157,844,798],{"class":177},[157,846,252],{"class":184},[157,848,849],{"class":191},"t",[157,851,743],{"class":170},[157,853,854],{"class":184}," t.completed);\n",[157,856,857,859,861,863,866],{"class":159,"line":313},[157,858,824],{"class":170},[157,860,338],{"class":198},[157,862,148],{"class":184},[157,864,865],{"class":198},"SHOW_ACTIVE",[157,867,834],{"class":184},[157,869,870,872,874,876,878,880,882,885],{"class":159,"line":647},[157,871,839],{"class":170},[157,873,842],{"class":184},[157,875,798],{"class":177},[157,877,252],{"class":184},[157,879,849],{"class":191},[157,881,743],{"class":170},[157,883,884],{"class":170}," !",[157,886,887],{"class":184},"t.completed);\n",[157,889,890,893],{"class":159,"line":656},[157,891,892],{"class":170},"            default",[157,894,834],{"class":184},[157,896,897,899],{"class":159,"line":661},[157,898,839],{"class":170},[157,900,901],{"class":184}," todos;\n",[157,903,905],{"class":159,"line":904},18,[157,906,907],{"class":184},"        }\n",[157,909,911],{"class":159,"line":910},19,[157,912,913],{"class":184},"    });\n",[157,915,917],{"class":159,"line":916},20,[157,918,164],{"emptyLinePlaceholder":163},[157,920,922,925,927,930,933,936,938,940],{"class":159,"line":921},21,[157,923,924],{"class":170},"    constructor",[157,926,252],{"class":184},[157,928,929],{"class":170},"protected",[157,931,932],{"class":170}," override",[157,934,935],{"class":191}," store",[157,937,195],{"class":170},[157,939,624],{"class":177},[157,941,262],{"class":184},[157,943,945,948],{"class":159,"line":944},22,[157,946,947],{"class":198},"        super",[157,949,950],{"class":184},"(store);\n",[157,952,954],{"class":159,"line":953},23,[157,955,956],{"class":184},"    }\n",[157,958,960],{"class":159,"line":959},24,[157,961,316],{"class":184},[10,963,964,965,968],{},"Final piece in the puzzle is to have a ",[121,966,967],{},"todos.service.ts"," file that will allow us to add, delete and update entitties in the store. This will directly interact with the store we created above.",[78,970,972],{"className":151,"code":971,"language":153,"meta":65,"style":65},"\n@Injectable({\n  providedIn: 'root'\n})\nexport class TodosService {\n\n  constructor(private todosStore: TodosStore) { }\n\n  updateFilter(filter: VISIBILITY_FILTER) {\n    this.todosStore.update({\n      ui: {\n        filter\n      }\n    });\n  }\n\n  complete(id: string) {\n    this.todosStore.update(id, { completed: true });\n  }\n\n  add(title: string) {\n    const todo = createTodo(title);\n    this.todosStore.add(todo);\n  }\n\n  delete(id: string) {\n    this.todosStore.remove(id);\n  }\n}\n",[49,973,974,978,986,992,996,1007,1011,1030,1034,1049,1062,1067,1072,1077,1081,1085,1089,1105,1122,1126,1130,1145,1160,1172,1176,1181,1197,1210,1215],{"__ignoreMap":65},[157,975,976],{"class":159,"line":160},[157,977,164],{"emptyLinePlaceholder":163},[157,979,980,982,984],{"class":159,"line":167},[157,981,575],{"class":184},[157,983,578],{"class":177},[157,985,581],{"class":184},[157,987,988,990],{"class":159,"line":188},[157,989,586],{"class":184},[157,991,589],{"class":350},[157,993,994],{"class":159,"line":205},[157,995,594],{"class":184},[157,997,998,1000,1002,1005],{"class":159,"line":217},[157,999,171],{"class":170},[157,1001,621],{"class":170},[157,1003,1004],{"class":177}," TodosService",[157,1006,185],{"class":184},[157,1008,1009],{"class":159,"line":230},[157,1010,164],{"emptyLinePlaceholder":163},[157,1012,1013,1015,1017,1020,1023,1025,1027],{"class":159,"line":236},[157,1014,641],{"class":170},[157,1016,252],{"class":184},[157,1018,1019],{"class":170},"private",[157,1021,1022],{"class":191}," todosStore",[157,1024,195],{"class":170},[157,1026,624],{"class":177},[157,1028,1029],{"class":184},") { }\n",[157,1031,1032],{"class":159,"line":241},[157,1033,164],{"emptyLinePlaceholder":163},[157,1035,1036,1039,1041,1043,1045,1047],{"class":159,"line":265},[157,1037,1038],{"class":177},"  updateFilter",[157,1040,252],{"class":184},[157,1042,798],{"class":191},[157,1044,195],{"class":170},[157,1046,338],{"class":177},[157,1048,262],{"class":184},[157,1050,1051,1054,1057,1060],{"class":159,"line":273},[157,1052,1053],{"class":198},"    this",[157,1055,1056],{"class":184},".todosStore.",[157,1058,1059],{"class":177},"update",[157,1061,581],{"class":184},[157,1063,1064],{"class":159,"line":285},[157,1065,1066],{"class":184},"      ui: {\n",[157,1068,1069],{"class":159,"line":291},[157,1070,1071],{"class":184},"        filter\n",[157,1073,1074],{"class":159,"line":300},[157,1075,1076],{"class":184},"      }\n",[157,1078,1079],{"class":159,"line":313},[157,1080,913],{"class":184},[157,1082,1083],{"class":159,"line":647},[157,1084,562],{"class":184},[157,1086,1087],{"class":159,"line":656},[157,1088,164],{"emptyLinePlaceholder":163},[157,1090,1091,1094,1096,1099,1101,1103],{"class":159,"line":661},[157,1092,1093],{"class":177},"  complete",[157,1095,252],{"class":184},[157,1097,1098],{"class":191},"id",[157,1100,195],{"class":170},[157,1102,199],{"class":198},[157,1104,262],{"class":184},[157,1106,1107,1109,1111,1113,1116,1119],{"class":159,"line":904},[157,1108,1053],{"class":198},[157,1110,1056],{"class":184},[157,1112,1059],{"class":177},[157,1114,1115],{"class":184},"(id, { completed: ",[157,1117,1118],{"class":198},"true",[157,1120,1121],{"class":184}," });\n",[157,1123,1124],{"class":159,"line":910},[157,1125,562],{"class":184},[157,1127,1128],{"class":159,"line":916},[157,1129,164],{"emptyLinePlaceholder":163},[157,1131,1132,1135,1137,1139,1141,1143],{"class":159,"line":921},[157,1133,1134],{"class":177},"  add",[157,1136,252],{"class":184},[157,1138,255],{"class":191},[157,1140,195],{"class":170},[157,1142,199],{"class":198},[157,1144,262],{"class":184},[157,1146,1147,1150,1153,1155,1157],{"class":159,"line":944},[157,1148,1149],{"class":170},"    const",[157,1151,1152],{"class":198}," todo",[157,1154,181],{"class":170},[157,1156,249],{"class":177},[157,1158,1159],{"class":184},"(title);\n",[157,1161,1162,1164,1166,1169],{"class":159,"line":953},[157,1163,1053],{"class":198},[157,1165,1056],{"class":184},[157,1167,1168],{"class":177},"add",[157,1170,1171],{"class":184},"(todo);\n",[157,1173,1174],{"class":159,"line":959},[157,1175,562],{"class":184},[157,1177,1179],{"class":159,"line":1178},25,[157,1180,164],{"emptyLinePlaceholder":163},[157,1182,1184,1187,1189,1191,1193,1195],{"class":159,"line":1183},26,[157,1185,1186],{"class":177},"  delete",[157,1188,252],{"class":184},[157,1190,1098],{"class":191},[157,1192,195],{"class":170},[157,1194,199],{"class":198},[157,1196,262],{"class":184},[157,1198,1200,1202,1204,1207],{"class":159,"line":1199},27,[157,1201,1053],{"class":198},[157,1203,1056],{"class":184},[157,1205,1206],{"class":177},"remove",[157,1208,1209],{"class":184},"(id);\n",[157,1211,1213],{"class":159,"line":1212},28,[157,1214,562],{"class":184},[157,1216,1218],{"class":159,"line":1217},29,[157,1219,316],{"class":184},[10,1221,1222],{},"Enough of setting up the state related stuff. Now we will create a component to show list of todo's and have a dropdown that will enable filtering based on different states of the Todo.",[10,1224,1225],{},"Create a new folder **features ** in app\u002Fsrc. Add first component.",[78,1227,1230],{"className":1228,"code":1229,"language":83},[81],"ng g c features\u002Ftodo-list\n",[49,1231,1229],{"__ignoreMap":65},[10,1233,1234,1235,1238],{},"Update the ",[121,1236,1237],{},"todo-list.component.ts"," file with following code.",[78,1240,1242],{"className":151,"code":1241,"language":153,"meta":65,"style":65},"\nexport class TodoListComponent implements OnInit {\n\n  @Output() deleteTodoEvent = new EventEmitter\u003Cstring>();\n  @Output() completeTodoEvent = new EventEmitter\u003Cstring>();\n  @Output() changeFilterEvent = new EventEmitter\u003CVISIBILITY_FILTER>();\n  todos$: Observable\u003CTodo[]>;\n  activeFilter$: Observable\u003CVISIBILITY_FILTER>;\n\n  displayedColumns: string[] = ['id', 'title', 'completed', 'action'];\n  \n  initialFilters: TodoFilter[] = [\n    { label: 'All', value: VISIBILITY_FILTER.SHOW_ALL },\n    { label: 'Completed', value: VISIBILITY_FILTER.SHOW_COMPLETED },\n    { label: 'Active', value: VISIBILITY_FILTER.SHOW_ACTIVE }\n  ];\n\n  constructor(private todosQuery: TodosQuery) { }\n\n  ngOnInit(): void {\n    this.todos$ = this.todosQuery.selectVisibleTodos$;\n    this.activeFilter$ = this.todosQuery.selectVisibilityFilter$;\n  }\n\n  deleteTodo(todo: Todo) {\n    this.deleteTodoEvent.emit(todo.id);\n  }\n\n  completeTodo(todo: Todo) {\n    this.completeTodoEvent.emit(todo.id);\n  }\n\n  changeFilter(event: any) {\n    this.changeFilterEvent.emit(event.value);\n  }\n",[49,1243,1244,1248,1265,1269,1298,1321,1344,1361,1377,1381,1420,1425,1441,1462,1479,1497,1502,1506,1523,1527,1542,1556,1570,1574,1578,1594,1607,1611,1615,1630,1642,1647,1652,1670,1683],{"__ignoreMap":65},[157,1245,1246],{"class":159,"line":160},[157,1247,164],{"emptyLinePlaceholder":163},[157,1249,1250,1252,1254,1257,1260,1263],{"class":159,"line":167},[157,1251,171],{"class":170},[157,1253,621],{"class":170},[157,1255,1256],{"class":177}," TodoListComponent",[157,1258,1259],{"class":170}," implements",[157,1261,1262],{"class":177}," OnInit",[157,1264,185],{"class":184},[157,1266,1267],{"class":159,"line":188},[157,1268,164],{"emptyLinePlaceholder":163},[157,1270,1271,1274,1277,1280,1283,1285,1288,1291,1293,1295],{"class":159,"line":205},[157,1272,1273],{"class":184},"  @",[157,1275,1276],{"class":177},"Output",[157,1278,1279],{"class":184},"() ",[157,1281,1282],{"class":191},"deleteTodoEvent",[157,1284,181],{"class":170},[157,1286,1287],{"class":170}," new",[157,1289,1290],{"class":177}," EventEmitter",[157,1292,469],{"class":184},[157,1294,477],{"class":198},[157,1296,1297],{"class":184},">();\n",[157,1299,1300,1302,1304,1306,1309,1311,1313,1315,1317,1319],{"class":159,"line":217},[157,1301,1273],{"class":184},[157,1303,1276],{"class":177},[157,1305,1279],{"class":184},[157,1307,1308],{"class":191},"completeTodoEvent",[157,1310,181],{"class":170},[157,1312,1287],{"class":170},[157,1314,1290],{"class":177},[157,1316,469],{"class":184},[157,1318,477],{"class":198},[157,1320,1297],{"class":184},[157,1322,1323,1325,1327,1329,1332,1334,1336,1338,1340,1342],{"class":159,"line":230},[157,1324,1273],{"class":184},[157,1326,1276],{"class":177},[157,1328,1279],{"class":184},[157,1330,1331],{"class":191},"changeFilterEvent",[157,1333,181],{"class":170},[157,1335,1287],{"class":170},[157,1337,1290],{"class":177},[157,1339,469],{"class":184},[157,1341,552],{"class":177},[157,1343,1297],{"class":184},[157,1345,1346,1349,1351,1354,1356,1358],{"class":159,"line":236},[157,1347,1348],{"class":191},"  todos$",[157,1350,195],{"class":170},[157,1352,1353],{"class":177}," Observable",[157,1355,469],{"class":184},[157,1357,147],{"class":177},[157,1359,1360],{"class":184},"[]>;\n",[157,1362,1363,1366,1368,1370,1372,1374],{"class":159,"line":241},[157,1364,1365],{"class":191},"  activeFilter$",[157,1367,195],{"class":170},[157,1369,1353],{"class":177},[157,1371,469],{"class":184},[157,1373,552],{"class":177},[157,1375,1376],{"class":184},">;\n",[157,1378,1379],{"class":159,"line":265},[157,1380,164],{"emptyLinePlaceholder":163},[157,1382,1383,1386,1388,1390,1393,1396,1399,1402,1404,1407,1409,1412,1414,1417],{"class":159,"line":273},[157,1384,1385],{"class":191},"  displayedColumns",[157,1387,195],{"class":170},[157,1389,199],{"class":198},[157,1391,1392],{"class":184},"[] ",[157,1394,1395],{"class":170},"=",[157,1397,1398],{"class":184}," [",[157,1400,1401],{"class":350},"'id'",[157,1403,474],{"class":184},[157,1405,1406],{"class":350},"'title'",[157,1408,474],{"class":184},[157,1410,1411],{"class":350},"'completed'",[157,1413,474],{"class":184},[157,1415,1416],{"class":350},"'action'",[157,1418,1419],{"class":184},"];\n",[157,1421,1422],{"class":159,"line":285},[157,1423,1424],{"class":184},"  \n",[157,1426,1427,1430,1432,1434,1436,1438],{"class":159,"line":291},[157,1428,1429],{"class":191},"  initialFilters",[157,1431,195],{"class":170},[157,1433,393],{"class":177},[157,1435,1392],{"class":184},[157,1437,1395],{"class":170},[157,1439,1440],{"class":184}," [\n",[157,1442,1443,1446,1449,1452,1454,1456,1459],{"class":159,"line":300},[157,1444,1445],{"class":184},"    { label: ",[157,1447,1448],{"class":350},"'All'",[157,1450,1451],{"class":184},", value: ",[157,1453,552],{"class":198},[157,1455,148],{"class":184},[157,1457,1458],{"class":198},"SHOW_ALL",[157,1460,1461],{"class":184}," },\n",[157,1463,1464,1466,1469,1471,1473,1475,1477],{"class":159,"line":313},[157,1465,1445],{"class":184},[157,1467,1468],{"class":350},"'Completed'",[157,1470,1451],{"class":184},[157,1472,552],{"class":198},[157,1474,148],{"class":184},[157,1476,831],{"class":198},[157,1478,1461],{"class":184},[157,1480,1481,1483,1486,1488,1490,1492,1494],{"class":159,"line":647},[157,1482,1445],{"class":184},[157,1484,1485],{"class":350},"'Active'",[157,1487,1451],{"class":184},[157,1489,552],{"class":198},[157,1491,148],{"class":184},[157,1493,865],{"class":198},[157,1495,1496],{"class":184}," }\n",[157,1498,1499],{"class":159,"line":656},[157,1500,1501],{"class":184},"  ];\n",[157,1503,1504],{"class":159,"line":661},[157,1505,164],{"emptyLinePlaceholder":163},[157,1507,1508,1510,1512,1514,1517,1519,1521],{"class":159,"line":904},[157,1509,641],{"class":170},[157,1511,252],{"class":184},[157,1513,1019],{"class":170},[157,1515,1516],{"class":191}," todosQuery",[157,1518,195],{"class":170},[157,1520,706],{"class":177},[157,1522,1029],{"class":184},[157,1524,1525],{"class":159,"line":910},[157,1526,164],{"emptyLinePlaceholder":163},[157,1528,1529,1532,1535,1537,1540],{"class":159,"line":916},[157,1530,1531],{"class":177},"  ngOnInit",[157,1533,1534],{"class":184},"()",[157,1536,195],{"class":170},[157,1538,1539],{"class":198}," void",[157,1541,185],{"class":184},[157,1543,1544,1546,1549,1551,1553],{"class":159,"line":921},[157,1545,1053],{"class":198},[157,1547,1548],{"class":184},".todos$ ",[157,1550,1395],{"class":170},[157,1552,731],{"class":198},[157,1554,1555],{"class":184},".todosQuery.selectVisibleTodos$;\n",[157,1557,1558,1560,1563,1565,1567],{"class":159,"line":944},[157,1559,1053],{"class":198},[157,1561,1562],{"class":184},".activeFilter$ ",[157,1564,1395],{"class":170},[157,1566,731],{"class":198},[157,1568,1569],{"class":184},".todosQuery.selectVisibilityFilter$;\n",[157,1571,1572],{"class":159,"line":953},[157,1573,562],{"class":184},[157,1575,1576],{"class":159,"line":959},[157,1577,164],{"emptyLinePlaceholder":163},[157,1579,1580,1583,1585,1588,1590,1592],{"class":159,"line":1178},[157,1581,1582],{"class":177},"  deleteTodo",[157,1584,252],{"class":184},[157,1586,1587],{"class":191},"todo",[157,1589,195],{"class":170},[157,1591,178],{"class":177},[157,1593,262],{"class":184},[157,1595,1596,1598,1601,1604],{"class":159,"line":1183},[157,1597,1053],{"class":198},[157,1599,1600],{"class":184},".deleteTodoEvent.",[157,1602,1603],{"class":177},"emit",[157,1605,1606],{"class":184},"(todo.id);\n",[157,1608,1609],{"class":159,"line":1199},[157,1610,562],{"class":184},[157,1612,1613],{"class":159,"line":1212},[157,1614,164],{"emptyLinePlaceholder":163},[157,1616,1617,1620,1622,1624,1626,1628],{"class":159,"line":1217},[157,1618,1619],{"class":177},"  completeTodo",[157,1621,252],{"class":184},[157,1623,1587],{"class":191},[157,1625,195],{"class":170},[157,1627,178],{"class":177},[157,1629,262],{"class":184},[157,1631,1633,1635,1638,1640],{"class":159,"line":1632},30,[157,1634,1053],{"class":198},[157,1636,1637],{"class":184},".completeTodoEvent.",[157,1639,1603],{"class":177},[157,1641,1606],{"class":184},[157,1643,1645],{"class":159,"line":1644},31,[157,1646,562],{"class":184},[157,1648,1650],{"class":159,"line":1649},32,[157,1651,164],{"emptyLinePlaceholder":163},[157,1653,1655,1658,1660,1663,1665,1668],{"class":159,"line":1654},33,[157,1656,1657],{"class":177},"  changeFilter",[157,1659,252],{"class":184},[157,1661,1662],{"class":191},"event",[157,1664,195],{"class":170},[157,1666,1667],{"class":198}," any",[157,1669,262],{"class":184},[157,1671,1673,1675,1678,1680],{"class":159,"line":1672},34,[157,1674,1053],{"class":198},[157,1676,1677],{"class":184},".changeFilterEvent.",[157,1679,1603],{"class":177},[157,1681,1682],{"class":184},"(event.value);\n",[157,1684,1686],{"class":159,"line":1685},35,[157,1687,562],{"class":184},[10,1689,1234,1690,1693],{},[121,1691,1692],{},"todo-list.component.html"," to include the angular material table",[78,1695,1699],{"className":1696,"code":1697,"language":1698,"meta":65,"style":65},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"row\">\n\u003Cmat-form-field>\n    \u003Cmat-label>Filter\u003C\u002Fmat-label>\n    \u003Cmat-select [(ngModel)]=\"activeFilter$\" name=\"filter\" (selectionChange)=\"changeFilter($event)\">\n      \u003Cmat-option *ngFor=\"let todoFilter of initialFilters\" [value]=\"todoFilter.value\">\n        {{todoFilter.label}}\n      \u003C\u002Fmat-option>\n    \u003C\u002Fmat-select>\n  \u003C\u002Fmat-form-field>\n  \n\u003Ch1>TODOS HISTORY\u003C\u002Fh1>\n\n\u003Ctable mat-table [dataSource]=\"todos$\" class=\"mat-elevation-z8\">\n\n    \u003C!-- Id -->\n    \u003Cng-container matColumnDef=\"id\">\n        \u003Cth mat-header-cell *matHeaderCellDef> Id \u003C\u002Fth>\n        \u003Ctd mat-cell *matCellDef=\"let element\"> {{element.id}} \u003C\u002Ftd>\n    \u003C\u002Fng-container>\n\n    \u003C!-- Title Column -->\n    \u003Cng-container matColumnDef=\"title\">\n        \u003Cth mat-header-cell *matHeaderCellDef> Title \u003C\u002Fth>\n        \u003Ctd mat-cell *matCellDef=\"let element\"> {{element.title}} \u003C\u002Ftd>\n    \u003C\u002Fng-container>\n\n     \u003C!-- Completed Column -->\n     \u003Cng-container matColumnDef=\"completed\">\n        \u003Cth mat-header-cell *matHeaderCellDef> Is Completed \u003C\u002Fth>\n        \u003Ctd mat-cell *matCellDef=\"let element\"> \n            \u003Cmat-checkbox [checked]=\"element.completed\"  (change)=\"completeTodo(element)\">Completed\u003C\u002Fmat-checkbox>\n        \u003C\u002Ftd>\n    \u003C\u002Fng-container>\n\n    \u003Cng-container matColumnDef=\"action\">\n        \u003Cth mat-header-cell *matHeaderCellDef> Action \u003C\u002Fth>\n        \u003Ctd mat-cell *matCellDef=\"let element\">\n            \u003Cbutton mat-icon-button color=\"warn\" aria-label=\"Delete\" (click)=\"deleteTodo(element)\">\n                \u003Cmat-icon>delete\u003C\u002Fmat-icon>\n            \u003C\u002Fbutton>\n        \u003C\u002Ftd>\n    \u003C\u002Fng-container>\n\n\n    \u003Ctr mat-header-row *matHeaderRowDef=\"displayedColumns\">\u003C\u002Ftr>\n    \u003Ctr mat-row *matRowDef=\"let row; columns: displayedColumns;\">\u003C\u002Ftr>\n\u003C\u002Ftable>\n\u003C\u002Fdiv>\n","html",[49,1700,1701,1719,1728,1743,1776,1802,1807,1816,1825,1834,1838,1852,1856,1883,1887,1893,1910,1931,1956,1964,1968,1973,1988,2005,2026,2034,2038,2043,2059,2076,2093,2124,2133,2141,2145,2160,2178,2195,2232,2248,2258,2267,2276,2281,2286,2312,2336,2346],{"__ignoreMap":65},[157,1702,1703,1705,1709,1711,1713,1716],{"class":159,"line":160},[157,1704,469],{"class":184},[157,1706,1708],{"class":1707},"s9eBZ","div",[157,1710,621],{"class":177},[157,1712,1395],{"class":184},[157,1714,1715],{"class":350},"\"row\"",[157,1717,1718],{"class":184},">\n",[157,1720,1721,1723,1726],{"class":159,"line":167},[157,1722,469],{"class":184},[157,1724,1725],{"class":1707},"mat-form-field",[157,1727,1718],{"class":184},[157,1729,1730,1733,1736,1739,1741],{"class":159,"line":188},[157,1731,1732],{"class":184},"    \u003C",[157,1734,1735],{"class":1707},"mat-label",[157,1737,1738],{"class":184},">Filter\u003C\u002F",[157,1740,1735],{"class":1707},[157,1742,1718],{"class":184},[157,1744,1745,1747,1750,1753,1755,1758,1761,1763,1766,1769,1771,1774],{"class":159,"line":205},[157,1746,1732],{"class":184},[157,1748,1749],{"class":1707},"mat-select",[157,1751,1752],{"class":177}," [(ngModel)]",[157,1754,1395],{"class":184},[157,1756,1757],{"class":350},"\"activeFilter$\"",[157,1759,1760],{"class":177}," name",[157,1762,1395],{"class":184},[157,1764,1765],{"class":350},"\"filter\"",[157,1767,1768],{"class":177}," (selectionChange)",[157,1770,1395],{"class":184},[157,1772,1773],{"class":350},"\"changeFilter($event)\"",[157,1775,1718],{"class":184},[157,1777,1778,1781,1784,1787,1789,1792,1795,1797,1800],{"class":159,"line":217},[157,1779,1780],{"class":184},"      \u003C",[157,1782,1783],{"class":1707},"mat-option",[157,1785,1786],{"class":177}," *ngFor",[157,1788,1395],{"class":184},[157,1790,1791],{"class":350},"\"let todoFilter of initialFilters\"",[157,1793,1794],{"class":177}," [value]",[157,1796,1395],{"class":184},[157,1798,1799],{"class":350},"\"todoFilter.value\"",[157,1801,1718],{"class":184},[157,1803,1804],{"class":159,"line":230},[157,1805,1806],{"class":184},"        {{todoFilter.label}}\n",[157,1808,1809,1812,1814],{"class":159,"line":236},[157,1810,1811],{"class":184},"      \u003C\u002F",[157,1813,1783],{"class":1707},[157,1815,1718],{"class":184},[157,1817,1818,1821,1823],{"class":159,"line":241},[157,1819,1820],{"class":184},"    \u003C\u002F",[157,1822,1749],{"class":1707},[157,1824,1718],{"class":184},[157,1826,1827,1830,1832],{"class":159,"line":265},[157,1828,1829],{"class":184},"  \u003C\u002F",[157,1831,1725],{"class":1707},[157,1833,1718],{"class":184},[157,1835,1836],{"class":159,"line":273},[157,1837,1424],{"class":184},[157,1839,1840,1842,1845,1848,1850],{"class":159,"line":285},[157,1841,469],{"class":184},[157,1843,1844],{"class":1707},"h1",[157,1846,1847],{"class":184},">TODOS HISTORY\u003C\u002F",[157,1849,1844],{"class":1707},[157,1851,1718],{"class":184},[157,1853,1854],{"class":159,"line":291},[157,1855,164],{"emptyLinePlaceholder":163},[157,1857,1858,1860,1863,1866,1869,1871,1874,1876,1878,1881],{"class":159,"line":300},[157,1859,469],{"class":184},[157,1861,1862],{"class":1707},"table",[157,1864,1865],{"class":177}," mat-table",[157,1867,1868],{"class":177}," [dataSource]",[157,1870,1395],{"class":184},[157,1872,1873],{"class":350},"\"todos$\"",[157,1875,621],{"class":177},[157,1877,1395],{"class":184},[157,1879,1880],{"class":350},"\"mat-elevation-z8\"",[157,1882,1718],{"class":184},[157,1884,1885],{"class":159,"line":313},[157,1886,164],{"emptyLinePlaceholder":163},[157,1888,1889],{"class":159,"line":647},[157,1890,1892],{"class":1891},"sJ8bj","    \u003C!-- Id -->\n",[157,1894,1895,1897,1900,1903,1905,1908],{"class":159,"line":656},[157,1896,1732],{"class":184},[157,1898,1899],{"class":1707},"ng-container",[157,1901,1902],{"class":177}," matColumnDef",[157,1904,1395],{"class":184},[157,1906,1907],{"class":350},"\"id\"",[157,1909,1718],{"class":184},[157,1911,1912,1915,1918,1921,1924,1927,1929],{"class":159,"line":661},[157,1913,1914],{"class":184},"        \u003C",[157,1916,1917],{"class":1707},"th",[157,1919,1920],{"class":177}," mat-header-cell",[157,1922,1923],{"class":177}," *matHeaderCellDef",[157,1925,1926],{"class":184},"> Id \u003C\u002F",[157,1928,1917],{"class":1707},[157,1930,1718],{"class":184},[157,1932,1933,1935,1938,1941,1944,1946,1949,1952,1954],{"class":159,"line":904},[157,1934,1914],{"class":184},[157,1936,1937],{"class":1707},"td",[157,1939,1940],{"class":177}," mat-cell",[157,1942,1943],{"class":177}," *matCellDef",[157,1945,1395],{"class":184},[157,1947,1948],{"class":350},"\"let element\"",[157,1950,1951],{"class":184},"> {{element.id}} \u003C\u002F",[157,1953,1937],{"class":1707},[157,1955,1718],{"class":184},[157,1957,1958,1960,1962],{"class":159,"line":910},[157,1959,1820],{"class":184},[157,1961,1899],{"class":1707},[157,1963,1718],{"class":184},[157,1965,1966],{"class":159,"line":916},[157,1967,164],{"emptyLinePlaceholder":163},[157,1969,1970],{"class":159,"line":921},[157,1971,1972],{"class":1891},"    \u003C!-- Title Column -->\n",[157,1974,1975,1977,1979,1981,1983,1986],{"class":159,"line":944},[157,1976,1732],{"class":184},[157,1978,1899],{"class":1707},[157,1980,1902],{"class":177},[157,1982,1395],{"class":184},[157,1984,1985],{"class":350},"\"title\"",[157,1987,1718],{"class":184},[157,1989,1990,1992,1994,1996,1998,2001,2003],{"class":159,"line":953},[157,1991,1914],{"class":184},[157,1993,1917],{"class":1707},[157,1995,1920],{"class":177},[157,1997,1923],{"class":177},[157,1999,2000],{"class":184},"> Title \u003C\u002F",[157,2002,1917],{"class":1707},[157,2004,1718],{"class":184},[157,2006,2007,2009,2011,2013,2015,2017,2019,2022,2024],{"class":159,"line":959},[157,2008,1914],{"class":184},[157,2010,1937],{"class":1707},[157,2012,1940],{"class":177},[157,2014,1943],{"class":177},[157,2016,1395],{"class":184},[157,2018,1948],{"class":350},[157,2020,2021],{"class":184},"> {{element.title}} \u003C\u002F",[157,2023,1937],{"class":1707},[157,2025,1718],{"class":184},[157,2027,2028,2030,2032],{"class":159,"line":1178},[157,2029,1820],{"class":184},[157,2031,1899],{"class":1707},[157,2033,1718],{"class":184},[157,2035,2036],{"class":159,"line":1183},[157,2037,164],{"emptyLinePlaceholder":163},[157,2039,2040],{"class":159,"line":1199},[157,2041,2042],{"class":1891},"     \u003C!-- Completed Column -->\n",[157,2044,2045,2048,2050,2052,2054,2057],{"class":159,"line":1212},[157,2046,2047],{"class":184},"     \u003C",[157,2049,1899],{"class":1707},[157,2051,1902],{"class":177},[157,2053,1395],{"class":184},[157,2055,2056],{"class":350},"\"completed\"",[157,2058,1718],{"class":184},[157,2060,2061,2063,2065,2067,2069,2072,2074],{"class":159,"line":1217},[157,2062,1914],{"class":184},[157,2064,1917],{"class":1707},[157,2066,1920],{"class":177},[157,2068,1923],{"class":177},[157,2070,2071],{"class":184},"> Is Completed \u003C\u002F",[157,2073,1917],{"class":1707},[157,2075,1718],{"class":184},[157,2077,2078,2080,2082,2084,2086,2088,2090],{"class":159,"line":1632},[157,2079,1914],{"class":184},[157,2081,1937],{"class":1707},[157,2083,1940],{"class":177},[157,2085,1943],{"class":177},[157,2087,1395],{"class":184},[157,2089,1948],{"class":350},[157,2091,2092],{"class":184},"> \n",[157,2094,2095,2098,2101,2104,2106,2109,2112,2114,2117,2120,2122],{"class":159,"line":1644},[157,2096,2097],{"class":184},"            \u003C",[157,2099,2100],{"class":1707},"mat-checkbox",[157,2102,2103],{"class":177}," [checked]",[157,2105,1395],{"class":184},[157,2107,2108],{"class":350},"\"element.completed\"",[157,2110,2111],{"class":177},"  (change)",[157,2113,1395],{"class":184},[157,2115,2116],{"class":350},"\"completeTodo(element)\"",[157,2118,2119],{"class":184},">Completed\u003C\u002F",[157,2121,2100],{"class":1707},[157,2123,1718],{"class":184},[157,2125,2126,2129,2131],{"class":159,"line":1649},[157,2127,2128],{"class":184},"        \u003C\u002F",[157,2130,1937],{"class":1707},[157,2132,1718],{"class":184},[157,2134,2135,2137,2139],{"class":159,"line":1654},[157,2136,1820],{"class":184},[157,2138,1899],{"class":1707},[157,2140,1718],{"class":184},[157,2142,2143],{"class":159,"line":1672},[157,2144,164],{"emptyLinePlaceholder":163},[157,2146,2147,2149,2151,2153,2155,2158],{"class":159,"line":1685},[157,2148,1732],{"class":184},[157,2150,1899],{"class":1707},[157,2152,1902],{"class":177},[157,2154,1395],{"class":184},[157,2156,2157],{"class":350},"\"action\"",[157,2159,1718],{"class":184},[157,2161,2163,2165,2167,2169,2171,2174,2176],{"class":159,"line":2162},36,[157,2164,1914],{"class":184},[157,2166,1917],{"class":1707},[157,2168,1920],{"class":177},[157,2170,1923],{"class":177},[157,2172,2173],{"class":184},"> Action \u003C\u002F",[157,2175,1917],{"class":1707},[157,2177,1718],{"class":184},[157,2179,2181,2183,2185,2187,2189,2191,2193],{"class":159,"line":2180},37,[157,2182,1914],{"class":184},[157,2184,1937],{"class":1707},[157,2186,1940],{"class":177},[157,2188,1943],{"class":177},[157,2190,1395],{"class":184},[157,2192,1948],{"class":350},[157,2194,1718],{"class":184},[157,2196,2198,2200,2203,2206,2209,2211,2214,2217,2219,2222,2225,2227,2230],{"class":159,"line":2197},38,[157,2199,2097],{"class":184},[157,2201,2202],{"class":1707},"button",[157,2204,2205],{"class":177}," mat-icon-button",[157,2207,2208],{"class":177}," color",[157,2210,1395],{"class":184},[157,2212,2213],{"class":350},"\"warn\"",[157,2215,2216],{"class":177}," aria-label",[157,2218,1395],{"class":184},[157,2220,2221],{"class":350},"\"Delete\"",[157,2223,2224],{"class":177}," (click)",[157,2226,1395],{"class":184},[157,2228,2229],{"class":350},"\"deleteTodo(element)\"",[157,2231,1718],{"class":184},[157,2233,2235,2238,2241,2244,2246],{"class":159,"line":2234},39,[157,2236,2237],{"class":184},"                \u003C",[157,2239,2240],{"class":1707},"mat-icon",[157,2242,2243],{"class":184},">delete\u003C\u002F",[157,2245,2240],{"class":1707},[157,2247,1718],{"class":184},[157,2249,2251,2254,2256],{"class":159,"line":2250},40,[157,2252,2253],{"class":184},"            \u003C\u002F",[157,2255,2202],{"class":1707},[157,2257,1718],{"class":184},[157,2259,2261,2263,2265],{"class":159,"line":2260},41,[157,2262,2128],{"class":184},[157,2264,1937],{"class":1707},[157,2266,1718],{"class":184},[157,2268,2270,2272,2274],{"class":159,"line":2269},42,[157,2271,1820],{"class":184},[157,2273,1899],{"class":1707},[157,2275,1718],{"class":184},[157,2277,2279],{"class":159,"line":2278},43,[157,2280,164],{"emptyLinePlaceholder":163},[157,2282,2284],{"class":159,"line":2283},44,[157,2285,164],{"emptyLinePlaceholder":163},[157,2287,2289,2291,2294,2297,2300,2302,2305,2308,2310],{"class":159,"line":2288},45,[157,2290,1732],{"class":184},[157,2292,2293],{"class":1707},"tr",[157,2295,2296],{"class":177}," mat-header-row",[157,2298,2299],{"class":177}," *matHeaderRowDef",[157,2301,1395],{"class":184},[157,2303,2304],{"class":350},"\"displayedColumns\"",[157,2306,2307],{"class":184},">\u003C\u002F",[157,2309,2293],{"class":1707},[157,2311,1718],{"class":184},[157,2313,2315,2317,2319,2322,2325,2327,2330,2332,2334],{"class":159,"line":2314},46,[157,2316,1732],{"class":184},[157,2318,2293],{"class":1707},[157,2320,2321],{"class":177}," mat-row",[157,2323,2324],{"class":177}," *matRowDef",[157,2326,1395],{"class":184},[157,2328,2329],{"class":350},"\"let row; columns: displayedColumns;\"",[157,2331,2307],{"class":184},[157,2333,2293],{"class":1707},[157,2335,1718],{"class":184},[157,2337,2339,2342,2344],{"class":159,"line":2338},47,[157,2340,2341],{"class":184},"\u003C\u002F",[157,2343,1862],{"class":1707},[157,2345,1718],{"class":184},[157,2347,2349,2351,2353],{"class":159,"line":2348},48,[157,2350,2341],{"class":184},[157,2352,1708],{"class":1707},[157,2354,1718],{"class":184},[10,2356,2357,2358,2361],{},"Finally, add the todo-page Component that will allow us to add the todo, receive the event of update and delete from the ",[121,2359,2360],{},"todo-list"," component.",[78,2363,2366],{"className":2364,"code":2365,"language":83},[81],"ng g c features\u002Ftodo-page\n",[49,2367,2365],{"__ignoreMap":65},[10,2369,2370,2371,2374],{},"update the ",[121,2372,2373],{},"todo-page.component.ts"," file with below code.",[78,2376,2378],{"className":151,"code":2377,"language":153,"meta":65,"style":65},"\nexport class TodoPageComponent implements OnInit {\n\n  add(input: HTMLInputElement) {\n    this.todosService.add(input.value);\n    input.value = '';\n  }\n\n  deleteTodo(id: string) {\n    debugger;\n    this.todosService.delete(id);\n  }\n  completeTodo(id: string) {\n    this.todosService.complete(id);\n  }\n\n  updateFilter(filter: VISIBILITY_FILTER){\n    this.todosService.updateFilter(filter);\n  }\n}\n",[49,2379,2380,2384,2399,2403,2419,2431,2443,2447,2451,2465,2472,2483,2487,2501,2512,2516,2520,2535,2547,2551],{"__ignoreMap":65},[157,2381,2382],{"class":159,"line":160},[157,2383,164],{"emptyLinePlaceholder":163},[157,2385,2386,2388,2390,2393,2395,2397],{"class":159,"line":167},[157,2387,171],{"class":170},[157,2389,621],{"class":170},[157,2391,2392],{"class":177}," TodoPageComponent",[157,2394,1259],{"class":170},[157,2396,1262],{"class":177},[157,2398,185],{"class":184},[157,2400,2401],{"class":159,"line":188},[157,2402,164],{"emptyLinePlaceholder":163},[157,2404,2405,2407,2409,2412,2414,2417],{"class":159,"line":205},[157,2406,1134],{"class":177},[157,2408,252],{"class":184},[157,2410,2411],{"class":191},"input",[157,2413,195],{"class":170},[157,2415,2416],{"class":177}," HTMLInputElement",[157,2418,262],{"class":184},[157,2420,2421,2423,2426,2428],{"class":159,"line":217},[157,2422,1053],{"class":198},[157,2424,2425],{"class":184},".todosService.",[157,2427,1168],{"class":177},[157,2429,2430],{"class":184},"(input.value);\n",[157,2432,2433,2436,2438,2441],{"class":159,"line":230},[157,2434,2435],{"class":184},"    input.value ",[157,2437,1395],{"class":170},[157,2439,2440],{"class":350}," ''",[157,2442,202],{"class":184},[157,2444,2445],{"class":159,"line":236},[157,2446,562],{"class":184},[157,2448,2449],{"class":159,"line":241},[157,2450,164],{"emptyLinePlaceholder":163},[157,2452,2453,2455,2457,2459,2461,2463],{"class":159,"line":265},[157,2454,1582],{"class":177},[157,2456,252],{"class":184},[157,2458,1098],{"class":191},[157,2460,195],{"class":170},[157,2462,199],{"class":198},[157,2464,262],{"class":184},[157,2466,2467,2470],{"class":159,"line":273},[157,2468,2469],{"class":170},"    debugger",[157,2471,202],{"class":184},[157,2473,2474,2476,2478,2481],{"class":159,"line":285},[157,2475,1053],{"class":198},[157,2477,2425],{"class":184},[157,2479,2480],{"class":177},"delete",[157,2482,1209],{"class":184},[157,2484,2485],{"class":159,"line":291},[157,2486,562],{"class":184},[157,2488,2489,2491,2493,2495,2497,2499],{"class":159,"line":300},[157,2490,1619],{"class":177},[157,2492,252],{"class":184},[157,2494,1098],{"class":191},[157,2496,195],{"class":170},[157,2498,199],{"class":198},[157,2500,262],{"class":184},[157,2502,2503,2505,2507,2510],{"class":159,"line":313},[157,2504,1053],{"class":198},[157,2506,2425],{"class":184},[157,2508,2509],{"class":177},"complete",[157,2511,1209],{"class":184},[157,2513,2514],{"class":159,"line":647},[157,2515,562],{"class":184},[157,2517,2518],{"class":159,"line":656},[157,2519,164],{"emptyLinePlaceholder":163},[157,2521,2522,2524,2526,2528,2530,2532],{"class":159,"line":661},[157,2523,1038],{"class":177},[157,2525,252],{"class":184},[157,2527,798],{"class":191},[157,2529,195],{"class":170},[157,2531,338],{"class":177},[157,2533,2534],{"class":184},"){\n",[157,2536,2537,2539,2541,2544],{"class":159,"line":904},[157,2538,1053],{"class":198},[157,2540,2425],{"class":184},[157,2542,2543],{"class":177},"updateFilter",[157,2545,2546],{"class":184},"(filter);\n",[157,2548,2549],{"class":159,"line":910},[157,2550,562],{"class":184},[157,2552,2553],{"class":159,"line":916},[157,2554,316],{"class":184},[10,2556,2557,2558,2561],{},"And finally update the ",[121,2559,2560],{},"todo-page.component.html"," like below.",[78,2563,2565],{"className":1696,"code":2564,"language":1698,"meta":65,"style":65},"\u003Cdiv class=\"row\">\n\n    \u003Cmat-form-field class=\"\">\n      \u003Cmat-label>Add A Todo\u003C\u002Fmat-label>\n      \u003Cinput matInput placeholder=\"Todo\" #input (keydown.enter)=\"add(input)\">\n      \u003Cmat-icon matSuffix>alarm\u003C\u002Fmat-icon>\n    \u003C\u002Fmat-form-field>\n  \u003C\u002Fdiv>\n\n  \u003Capp-todo-list \n  (deleteTodoEvent)=\"deleteTodo($event)\"\n  (completeTodoEvent)=\"completeTodo($event)\"\n  (changeFilterEvent)=\"updateFilter($event)\"\n  >\u003C\u002Fapp-todo-list>\n",[49,2566,2567,2581,2585,2600,2613,2643,2659,2667,2675,2679,2690,2700,2710,2720],{"__ignoreMap":65},[157,2568,2569,2571,2573,2575,2577,2579],{"class":159,"line":160},[157,2570,469],{"class":184},[157,2572,1708],{"class":1707},[157,2574,621],{"class":177},[157,2576,1395],{"class":184},[157,2578,1715],{"class":350},[157,2580,1718],{"class":184},[157,2582,2583],{"class":159,"line":167},[157,2584,164],{"emptyLinePlaceholder":163},[157,2586,2587,2589,2591,2593,2595,2598],{"class":159,"line":188},[157,2588,1732],{"class":184},[157,2590,1725],{"class":1707},[157,2592,621],{"class":177},[157,2594,1395],{"class":184},[157,2596,2597],{"class":350},"\"\"",[157,2599,1718],{"class":184},[157,2601,2602,2604,2606,2609,2611],{"class":159,"line":205},[157,2603,1780],{"class":184},[157,2605,1735],{"class":1707},[157,2607,2608],{"class":184},">Add A Todo\u003C\u002F",[157,2610,1735],{"class":1707},[157,2612,1718],{"class":184},[157,2614,2615,2617,2619,2622,2625,2627,2630,2633,2636,2638,2641],{"class":159,"line":217},[157,2616,1780],{"class":184},[157,2618,2411],{"class":1707},[157,2620,2621],{"class":177}," matInput",[157,2623,2624],{"class":177}," placeholder",[157,2626,1395],{"class":184},[157,2628,2629],{"class":350},"\"Todo\"",[157,2631,2632],{"class":177}," #input",[157,2634,2635],{"class":177}," (keydown.enter)",[157,2637,1395],{"class":184},[157,2639,2640],{"class":350},"\"add(input)\"",[157,2642,1718],{"class":184},[157,2644,2645,2647,2649,2652,2655,2657],{"class":159,"line":230},[157,2646,1780],{"class":184},[157,2648,2240],{"class":1707},[157,2650,2651],{"class":177}," matSuffix",[157,2653,2654],{"class":184},">alarm\u003C\u002F",[157,2656,2240],{"class":1707},[157,2658,1718],{"class":184},[157,2660,2661,2663,2665],{"class":159,"line":236},[157,2662,1820],{"class":184},[157,2664,1725],{"class":1707},[157,2666,1718],{"class":184},[157,2668,2669,2671,2673],{"class":159,"line":241},[157,2670,1829],{"class":184},[157,2672,1708],{"class":1707},[157,2674,1718],{"class":184},[157,2676,2677],{"class":159,"line":265},[157,2678,164],{"emptyLinePlaceholder":163},[157,2680,2681,2684,2687],{"class":159,"line":273},[157,2682,2683],{"class":184},"  \u003C",[157,2685,2686],{"class":1707},"app-todo-list",[157,2688,2689],{"class":184}," \n",[157,2691,2692,2695,2697],{"class":159,"line":285},[157,2693,2694],{"class":177},"  (deleteTodoEvent)",[157,2696,1395],{"class":184},[157,2698,2699],{"class":350},"\"deleteTodo($event)\"\n",[157,2701,2702,2705,2707],{"class":159,"line":291},[157,2703,2704],{"class":177},"  (completeTodoEvent)",[157,2706,1395],{"class":184},[157,2708,2709],{"class":350},"\"completeTodo($event)\"\n",[157,2711,2712,2715,2717],{"class":159,"line":300},[157,2713,2714],{"class":177},"  (changeFilterEvent)",[157,2716,1395],{"class":184},[157,2718,2719],{"class":350},"\"updateFilter($event)\"\n",[157,2721,2722,2725,2727],{"class":159,"line":313},[157,2723,2724],{"class":184},"  >\u003C\u002F",[157,2726,2686],{"class":1707},[157,2728,1718],{"class":184},[28,2730,2732],{"id":2731},"summary","Summary",[10,2734,2735,2736],{},"That's it, you have an angular app with akita state management. To summarize, Akita makes state management a lot easier and it has less boilerplate than something like ",[14,2737,2740],{"href":2738,"rel":2739},"https:\u002F\u002Fngrx.io\u002F",[18],"NgRx",[2742,2743,2744],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":65,"searchDepth":167,"depth":167,"links":2746},[2747,2748,2749,2750],{"id":30,"depth":167,"text":31},{"id":43,"depth":167,"text":44},{"id":55,"depth":167,"text":56},{"id":2731,"depth":167,"text":2732},"2023-06-17","State management in Angular","md",{},"\u002Fblog\u002Fangular\u002Fakita\u002Fakitastatemanagement",{"title":5,"description":2752},"blog\u002Fangular\u002FAkita\u002FAkitaStateManagement",[2759,153,2760],"Angular","state-management","nDkpSXKfH6-mAKsPY-2NV7Vv9KaOrhExBIsmajOzlL0",1782221323127]