javascript – How to re-use an Angular component (containing a form) for different, customized type of uses in two separate parent components?-ThrowExceptions

Exception or error:

I am working on an Angular project. I have an angular component component1 which has a form in its HTML file. The form is mainly template-driven and uses custom-created Class object (as a model for wrapping the form data) instead of Angular Forms model Class. Now I have two more components, component2 and component3. I want to use component1 in both component2 as well as component3 with the following differences:

component2 provides the end-user with a new, empty form that they can fill and save/submit. On the other hand, component3 is used for two purposes: to fetch such saved/submitted forms from the backend and display them, of course, one form at a time. The form in component2 has all fields enabled. However, in component3, all form fields need to be enabled if rendering a saved form from the backend; on the other hand, all the form fields need to be disabled if rendering a submitted form from the backend. component3 should be able to save/submit existing saved forms (editable); while for already submitted forms, it should simply display them (non-editable).

Currently, I am duplicating component1 into component4 and using component1 with component2 and component4 with component3. However, this seems redundant. Essentially, I want to re-use the same component1 code and html template in both component2 as well as component3. However, despite my best efforts, I am unable to re-use it in such a way that the functionalities of component2 and component3 are provided seamlessly without any compromise.

I believe that on a high level, the way out is using component1 as a child component of component2 as well as component3 by placing its selector in those components. However, given the functionalities/purposes that are needed to be served by component2 as well as component3, I am unable to do it. Also, I need to provide different stylings to component1 in component2 and component3.

Would appreciate any help in this regard, as to how I can go about coding it in a way that component1 can be used by component2 as well as component3 to implement their features without any interference and also be able to provide different css stylings to the component1 form when used in component2 vs component3 !!!

How to solve:

I assume that in case of Component3, Component1 should receive an id or like that to load the saved data. So an idea would be to have a routing hierarchy like this:

const routes: Routes = [
      {
       path: '',
       component: Component2,
       children: [{
         path: '/comp1',
         component: Component1 
       }]
      },
      {
       path: '',
       component: Component3,
       children: [{
         path: '/comp1:id',
         component: Component1 
       }]
      }
    ];`

In summary, from component 2 you can call component 1 just with the url /comp1, while from Component 3 e.g. /comp1/1. Then in Component1 you can check whether the id parameter is available and then fetch the saved data. Otherwise display empty form. Regarding the styles you can have conditional styling on form fields like this e.g.

[ngStyle]="{'background-color': (id!='') ? '#73c7af' : '#ffffff'}"

Leave a Reply

Your email address will not be published. Required fields are marked *