Implement State Control with localStorage for Checkboxes (showRaw and hiddenLabel)

[lucasferreiralimax]

Implement checkboxes in the ListTechsComponent to manage the state of showRaw and hiddenLabel variables, with persistence in localStorage. This will allow the checkbox selections to be retained across sessions following the implementation below.

Tasks

1. Define Initial States in Component:

   • Add showRaw and hiddenLabel properties to ListTechsComponent.
   • In ngOnInit, initialize these properties based on values stored in localStorage.

2. Add Template for Checkboxes:

   • Create the checkbox layout in the template file (list-techs.component.html), using [(ngModel)] for two-way binding.

3. Save Changes to localStorage on Toggle:

   • Implement an onCheckboxChange method that updates localStorage when a checkbox value changes.
   • Ensure TypeScript recognizes the specific keys (showRaw and hiddenLabel) by using type assertions or a helper method, following one of these approaches:
     • Option 1: Use type assertion in onCheckboxChange:

       onCheckboxChange(key: 'showRaw' | 'hiddenLabel') {
         localStorage.setItem(key, JSON.stringify(this[key as keyof ListTechsComponent]));
       }

     • Option 2: Define a helper method for dynamic access:

       private getProperty(key: 'showRaw' | 'hiddenLabel'): boolean {
         return this[key];
       }
       
       onCheckboxChange(key: 'showRaw' | 'hiddenLabel') {
         localStorage.setItem(key, JSON.stringify(this.getProperty(key)));
       }