Angular component extend similar functionalities among them

Question

I have created a UI Angular library for my Organization, which is used in other microservice web apps of this org. Basically, Library contains some independent components such as cards, checkbox, data table, date picker, input fields (inputs, textarea), select, upload modal, badge, tooltip etc with the UI/UX of this Organisation.

These components are used in other web-apps to provide a unique view of components and functionality. Now, I wanted to implement autosave feature in some components. The feature should save the input values in the cache and should load the saved value back to the inputs. Once the values are saved, the cache is removed. The feature is required because sometimes the user is filling the form and by mistake he has clicked somewhere else and the page is reloaded... when he/she comes back, he/she has to fill the form again.

Solutions in my mind yet

• I can do this by using a custom directive, and then all other end-devs has to update their apps and add this directive to each component.

• I was thinking, if I can create custom class (abstract class) with autosave functionality and extend this class in the components of type inputs, but somewhere I feel this might not be correct approach in Angular. One of he problem is the DI because from parent you have to get the dependencies(services...) and pass to the child compoent.

    @Component(...)
    export class InputText implements OnInit, OnDestroy extends AutosaveInputData {
        constructor(....) {
          super(....);
        }
        ngOninit() {...};
        @Overwrite()
        protected aFunctionFromExtendClass() {
         .....
        }
        ngOnDestroy() {...};
    }
  

• The other option could be to create something similar to ControlValueAccessor, but I have no idea how can do it and start from where? This seems to be a good approach to me

How can I add a similar functionality to some components? What would be the correct approach to follow? and How?

I am using angular 9 and in a few months we will be shifting to the angular 13.

Thanks in advance

Answer 1

The directive sounds like a good approach

<input 
   [input-cache]="uniqueId"
   [clear]="isSaved"
>

In the InputCacheDirective you could save the input value in sessionStorage using the "uniqueId" - isSaved would be a boolean setter (or could use ngOnChanges) to clear the sessionStorage