I have written a schedule in which I would like to select time ranges for a given day of the week. In addition, I have a check-box added, where I would like it to set me up all day, and after unchecking it, I can choose the range of hours myself. Please help

https://stackblitz.com/edit/angular-ivy-fnk2ma?fbclid=IwAR0U_uXcEvqauMcCCj9_cLbBP_uJojRCDQ6Umumbf6KHLBltjtkzmkhwAE0&file=src/app/app.component.ts

CodePudding user response：

I've taken your stackblitz script and tweaked it a bit so it has the desired behavior.

The steps I've taken include:

• Created a Row interface to avoid using any types. One of the key points in Typescript.
• Simplified the data structure -> now there is one instead of two.
• Changed the cell click function -> took out the active class toggle and now only work with the cell value. In the HTML, there is a ngClass directive that toggles the active class if the cell value is 1.
• Added a function to toggle the entire row.
• Fixed the input id and label for tags so they're not the same in the entire array and thus if you pressed any label, it would toggle only the first row.

We could go even further and remove the active field from the rows, but it does simplify the readiness.

Here you go: https://stackblitz.com/edit/angular-ivy-cehxvw?file=src/app/app.component.ts