Comments on: Using the Adapter Pattern in Angular Apps for Easier Maintenance

By: Arthur Fedotiew

Arthur Fedotiew — Tue, 21 Sep 2021 03:53:00 +0000

Thanks for an interesting articel. Though, i’ve got some questions:
1. Seems that SquareButtonComponent template with its switchcase is gonna be duplicated each time when we need to create new shpae of buttons, violationg DRY principle? I.e. we need CircleButtonComponent, then we;d have to duplicate this template with all switch cases?
2. Doesn’t injecting SquareButtonComponent into Primary and secondary buttons create tight coupling between PrimaryButtonComponent and SquareButtonComponent violation open-closed? Doens’t it prevent PrimaryButtonComponent from being able to be used with any other “any-shape”ButtonComponent? Couldn’t we just inject ChildButtonComponent, and provide it in “any-shape”ButtonComponent like this
{ provide: ChildButtonComponent, useExisting: forwardRef(() => "any-shape"ButtonComponent) }
instead?

By: mickdelaney

mickdelaney — Tue, 10 Mar 2020 08:56:00 +0000

Have you looked at ngx-formly for abstracting forms ?

By: Form validation with ControlValueAccessor – Christian Lüdemann

Form validation with ControlValueAccessor – Christian Lüdemann — Tue, 07 Jan 2020 17:00:44 +0000

[…] we have UI components, that are using inputs, we normally want to hook it into the form handling so we can do form […]

By: Christian Lydemann

Christian Lydemann — Thu, 02 Jan 2020 11:59:00 +0000

In reply to Cobus Kruger. Yes, use ValueControlAccessor for integrating the ui adapter component in the form validation. I just added another section of the blog post explaining this :)

By: Cobus Kruger

Cobus Kruger — Tue, 12 Nov 2019 09:30:00 +0000

Cool article and definitely the way to go. Your example is of a simple case though – the button. I have done the same for other form controls as well (inputs, the third-party ng-select and so on), and implement ControlValueAccessor to integrate with reactive forms. This has worked well, except in ng-select, where setting that control’s value raised an ExpressionChangedAfterItHasBeenCheckedError. Regardless of my error though, would you agree that’s the way to approach wrapping third-party inputs?

By: The Ten Commandments of Angular Development – Christian Lüdemann

The Ten Commandments of Angular Development – Christian Lüdemann — Tue, 05 Nov 2019 20:45:08 +0000

[…] encapsulate the trivial UI components through adapter UI components instead of hard coupling the architecture into eg. Bootstrap. This is creating the building blocks […]

By: The Three Building Blocks of Elite Angular Teams – Christian Lüdemann

The Three Building Blocks of Elite Angular Teams – Christian Lüdemann — Tue, 14 May 2019 19:19:57 +0000

[…] UI library which contains all the UI building blocks that are needed in the system and makes the development […]

By: Implementing a Plugin Architecture with Angular and OpenLayers – Christian Lüdemann IT

Sun, 21 Oct 2018 17:02:38 +0000

[…] important to care about the design of the app. I have previously written about how to apply the adapter pattern in Angular apps and how to refactor Angular apps, but this is a more general topic about a technique to scale the […]