Angular click switch Component keeps track of its previous state

Question

Angular click switch Component keeps track of its previous state

I recently developed an Angular component that consists of a button and an icon.

One key requirement is for each instance of this component to retain its own status.

For example, let's say we have three instances in the app.component.html:

<app-view-btn></app-view-btn>
<app-view-btn></app-view-btn>
<app-view-btn></app-view-btn>

Now, here is the code for the view-btn-component:

view-btn-component.html

<button>
    <i
        class="fa"
        [ngClass]="status ? 'fa-eye-slash' : 'fa-eye'"
        aria-hidden="true"
        (click)="clickEvent()">
    </i>
</button>

view-btn-component.ts

status: boolean = false;

  constructor() {}

  ngOnInit(): void {}

  clickEvent(){
    this.status = !this.status;       
  }

The current issue I am facing is that when the page reloads, the components lose track of their statuses.

Can anyone suggest how I can implement a solution where each component retains its status using local storage or any other method?

angular typescript

Answer 1

Answer №1

PLEASE NOTE: THERE IS ROOM FOR IMPROVEMENT IN THIS CODE BUT THE CORE IDEA REMAINS UNCHANGED!

Generate a unique input for each component to distinguish it:

<app-view-btn [name]="button0"></app-view-btn>
<app-view-btn [name]="button1"></app-view-btn>
<app-view-btn [name]="button2"></app-view-btn>

In your typescript file, you can implement something similar to the following. It is advisable to refine the code further, such as using JSON parsing techniques, but the concept remains the same.

@Input() name: string;
status: boolean = false;

  constructor() {}

  ngOnInit(): void {
// TODO: Enhance this section
const storageValue = localStorage.getItem(this.name)
    this.status = storageValue ? JSON.parse(storageValue) : false;
    }

  clickEvent(){
    this.status = !this.status;
// The status can be stored in an object if needed
    localStorage.setItem(this.name, JSON.stringify(this.status));
      }

Answer 2

PLEASE NOTE: THERE IS ROOM FOR IMPROVEMENT IN THIS CODE BUT THE CORE IDEA REMAINS UNCHANGED!

Generate a unique input for each component to distinguish it:

<app-view-btn [name]="button0"></app-view-btn>
<app-view-btn [name]="button1"></app-view-btn>
<app-view-btn [name]="button2"></app-view-btn>

In your typescript file, you can implement something similar to the following. It is advisable to refine the code further, such as using JSON parsing techniques, but the concept remains the same.

@Input() name: string;
status: boolean = false;

  constructor() {}

  ngOnInit(): void {
// TODO: Enhance this section
const storageValue = localStorage.getItem(this.name)
    this.status = storageValue ? JSON.parse(storageValue) : false;
    }

  clickEvent(){
    this.status = !this.status;
// The status can be stored in an object if needed
    localStorage.setItem(this.name, JSON.stringify(this.status));
      }

Angular click switch Component keeps track of its previous state

Answer №1

Similar questions

Exploring Node Stream.Writable Extension in Typescript 4.8

Troubleshoot: Issue with binding data from DynamicComponentLoader in Angular 2 template

Tips for concealing information within the column labeled company Name with respect to the field designated as Company Name

Is the utilization of the React context API in NextJS 13 responsible for triggering a complete app re-render on the client side

Oops! The system encountered a problem: the property 'modalStack' is not recognized on the type 'NgxSmartModalService'. Maybe you meant to use '_modalStack' instead?

Transferring data types to a component and then sending it to a factory

Angular SwitchMap is a powerful operator that allows you

Exploring TypeScript Object Properties in Angular 2

Error message pops up in WebStorm when attempting to access the map object in Angular

Stop images from constantly refreshing upon each change of state - React

Only the (click) event is functional in Angular, while the (blur), (focus), and (focusout) events are not functioning

Discovering the tab index of a tab header in Angular 4 Material

How can you annotate and inherit a class method that returns an array of itself?

What is the best way to ensure an observable has finished before retrieving a value?

Tips for creating a unit test case in Angular 5 for API failures

Steps for inserting a dropdown menu into a kendo grid

How can two distinct sachems be returned in an http get request using res.json()?

Generate dynamic forms utilizing JSON data

Exploring the Flow of Angular 5 HttpInterceptor

Navigating the syntax of React with Typescript - Feeling lost