refactoring duplicate code
63 views
Skip to first unread message
john.mb...@gmail.com
Mar 10, 2021, 5:39:03 AM3/10/21
to Angular and AngularJS discussion
hi, as you can see in my code below, I am repeating code. I was just wondering what the best way would be to refactor this code:
```
<div class="my-2" *ngSwitchCase="'BPFDateTimeElement'">
<core-date
[control]="form.get(section.objectID).get(rowElement.objectID)"
[element]="rowElement"
></core-date>
</div>
<div class="my-2" *ngSwitchCase="'BPFBooleanElement'">
<core-boolean
[control]="form.get(section.objectID).get(rowElement.objectID)"
[element]="rowElement"
></core-boolean>
</div>
<div class="my-2" *ngSwitchCase="'BPFEntryElement'">
<core-input
[control]="form.get(section.objectID).get(rowElement.objectID)"
[element]="rowElement"
></core-input>
</div>
<div class="my-2" *ngSwitchCase="'BPFTextViewElement'">
<core-textarea
[control]="form.get(section.objectID).get(rowElement.objectID)"
[element]="rowElement"
></core-textarea>
</div>
<div class="my-2" *ngSwitchCase="'BPFPicklistElement'">
<core-pick-list
[control]="form.get(section.objectID).get(rowElement.objectID)"
[element]="rowElement"
></core-pick-list>
```
bastien lemaire
Mar 10, 2021, 5:43:12 AM3/10/21
to ang...@googlegroups.com
It seems you're creating some sort of dynamic form (display date picker if data is of type date ...)
We have been using either ngx/formly or some angular dynamic component creation mechanism: https://angular.io/api/core/ComponentFactory
Hope this helps
Bastien Lemaire
--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/2818053c-c552-4084-a846-9bad28f832c7n%40googlegroups.com.
Todd Zmijewski
Mar 12, 2021, 6:30:18 AM3/12/21
to Angular and AngularJS discussion
I would somewhat disagree. If this is your own code and you don't need to make it flexible enough to extend without adding more cases this is fine. Its in no way a great solution nor one I would recommend but the alternatives are much more complex. I really hate promoting my own projects especially when they are no where near what I want them to be but implementing some type of plugin system where each of those controls can be swapped out with another so long as they implement the same interface seems like it would work well. I have not used formly but have read the docs. I think formly is a great solution for building dynamic forms.
This is my project where I had to implement a plugin system basically for the same reason. I started with a bunch of hard coded switch cases but soon realized the limitation. So I migrated to tokens. Realized tokens are not a great solution because services that have already been instantiated don't get any updates. So decided to implement my own plugin service that can not only be extended dynamically but discover plugins from any possibly any location. Including locations outside my source code. Inspired by Drupal.
Todd Zmijewski
Mar 12, 2021, 6:37:45 AM3/12/21
to Angular and AngularJS discussion
Layout is an easy example of how this kind of works.
A plugin is just a class that extends Plugin adding properties specific to that plugin/context. These are all properties that every instance of that class share. If they share the properties they can than be swapped out with one another.
Inside the layout module I also declare the base layouts as plugins.
The idea being that any layout can take the place of another layout. Also the layouts can be added without altering the library source code.
Todd Zmijewski
Mar 12, 2021, 6:41:10 AM3/12/21
to Angular and AngularJS discussion
Also, this is not something I created. It's all inspired by Drupal.
I worked with Drupal for a long while before seeing the light. However, there are architectural pieces of that platform that are ingenious. The plugin system being one of them. So I stole it…
Todd Zmijewski
Mar 12, 2021, 7:03:47 AM3/12/21
to Angular and AngularJS discussion
I have the same issue here.
A bunch of worthless switches that need to be replaced with the plugin mechanism.
Reply all
Reply to author
Forward
0 new messages