shopping-list | a PWA to note shopping list and see shopping history | Progressive Web Application library

I have created an event in my header component and trying to listen it in app component, but it is not working as expected.

In header.component.html, on clicking on "Recipes" it is sending 'recipe' string to "onSelect()" method and on clicking on "Shopping List", it is sending string 'shopping-list' to "onSelect()" method.

I have created proper Ingredient object in Typesript, also proper "model" for the object. Though ngfor directive is not working. I am getting this error "NG0303: Can't bind to 'ngforOf' since it isn't a known property of 'a'" on inspecting in browser.

My model code

I want to save the file in custom directroy

I get below error:

Fatal error: Uncaught PhpOffice\PhpSpreadsheet\Writer\Exception: Could not open C:\xampp\htdocs\test3/wp-content/uploads/next_shoppingcart\shoppingcart_report_2021-12-13 17:43:00.xlsx for writing. in C:\xampp\htdocs\test3\wp-content\plugins\next-shopping-list\vendor\phpoffice\phpspreadsheet\src\PhpSpreadsheet\Writer\Xlsx.php:218 Stack trace

the code is:

currently I'm learning NgRx. So far I learned this:

• For changing the state, we dispatch so called actions
• An action is an object with an identifier and optionally with a payload
• This action doesn’t directly reach the store, instead it reaches a so called reducer
• The reducer is just a function: it gets the current state from the store and the action as an input
• In the reducer we can have a look at the action identifier and perform the change on the state accordingly (which we got as an argument) to update that state, in an immutable way (changing the copy)
• The reducer returns a new state, it returns a copy of the old state, and this state is forwarded to the app store
• This reduced state is then overwriting the old state

I can't really understand, why we don't directly change the state stored in the store? Why do we need this reducer and make the change on a copy of the state in the store and write it back?

For my another question here is a bit code:

I am new to coding, and I am trying to make a shopping list app although I ran into some problem. I am trying to select the elements of a table, it has two columns one for the shopping item and one for buttons next to each item. I want to click the button next to the item and with that add a css style of strikethrough but only for that respective item. But now i can click any "Mark as buyed button" and will apply the styles for all the items, and after that sort the items in ascending or descending order with two other buttons. A little help/hint would be appreciated. Thank you in advance, if my post is not that clear please do tell

Here is my code: My code

Can anyone help me in how to run the application ?

all the import pacakages I see are underlined as errors.

I am using local storage to set todo items.

But I am somewhat new to JavaScript, so I am really confused about this matter. I know how to set local storage items though. Anyway, I know that I need to use a list to do this, but I'm confused to do that too.

Please show me how to do that in code (add localstorage items to list and create

tags with innerHTML of the list values). Here is my current code.

I am new to angular. Here I using ngrx to manage a state in my angular app. But when I'm compiling I got the following error. It says that 'Types of parameters 'action' and 'action' are incompatible'. I want to know the reason for this and how to solve this?

I am working on a deploying a MERN stack application to Heroku. When run locally my project works perfectly but I face the following error when I try to run my application from Heroku.

2020-11-23T01:08:02.199575+00:00 app[web.1]: npm ERR! Failed at the mernshoppinglist@1.0.0 start script.

Here is the full logs from Heroku when I try to load the application