Migration from PrimeNG to angular CDK

[Iloveall]

Angular Material research

Angular Material - offers a wide variety of UI components based on the Material Design specification.
Angular CDK - The Component Dev Kit (CDK) is a set of behavior primitives for building UI components.

I've installed angular material and checked - there are no style conflicts.

Current version of material theme is v2 (v18), but the next version is material v3 (v19) and they also have changed approach to the tokens system for customisation, fortunately through scss - https://material.angular.io/guide/theming#customizing-tokens

It's much better approach as we don't have to worries about future updating when the structure of html, css classes in lib will be changed (https://material.angular.io/guide/theming#direct-style-overrides), the customisation through token
does guarantee that the styles will be linked correctly. But we will have to do adjustments when migrate from v2 to v3, possible breaking changes.

New documentation for styling in v3 (19) https://material.angular.io/components/button/styling

Conclusion:

After research and attempts to customise the button I've realised - the better to use only CDK for covering behavior and our own styles.
The problem is - our design is too far from material way, their system, paddings, sizes, colours etc, ex https://m3.material.io/components/buttons/overview.

Our design is quite own, to customise material button to our style - it's set of overrides and !important flags. The tokens they provided in v3 gives oppotunity to changed
colours, hovers, state options, but not a sizes as they have strong size guide for make every components fit to each other.

PrimeNG components in app:

• p-button (Matched - 90):
  Could be done as custom button, I assume 2 types in one component - with icon and without

• p-toast (Matched - 1):
  https://v18.material.angular.io/components/snack-bar/examples - It's not from cdk, but as exception we can use couple of components from material. Minus of it - preloading of theme css file (purgecss will help to decrease file size)

• p-tree (Matched - 1):
  CDK https://v18.material.angular.io/cdk/tree/examples - with own styles

• p-confirmDialog (common confirmation) (Matched - 1):
  CDK https://material.angular.io/cdk/dialog/examples

• p-confirmPopup (Matched - 1):
  (https://primeng.org/confirmpopup) - didn't find alternative, so probably one of those as well - CDK https://material.angular.io/cdk/dialog/examples

• p-dialog (Matched 9):
  CDK https://material.angular.io/cdk/dialog/examples

• p-dropdown (Select) (Matched 2):
  CDK https://material.angular.io/cdk/menu/overview - it's not control, so need to wrap it by custom control component

• p-table (Mached 20):
  CDK https://material.angular.io/cdk/table/overview, with own styles

• p-overlayPanel (Matched - 1):
  CDK https://material.angular.io/cdk/overlay/examples - we have done a lot of work with path suggestion, still need to check how to migrate

• p-menu (Matched - 1):
  CDK https://material.angular.io/cdk/overlay/examples

• p-inputNumber (Matched - 2):
  Own component with mask I suppose, didn't find it in CDK, so need to care on it by self.
  For alternative (I know we are against dependencies) just to look https://github.com/JsDaddy/ngx-mask

• p-tag (Matched - 1):
  Could be own custom component

• p-messages (Matched - 1):
  I guess own custom component

• p-inputSwitch (Matched 1):
  https://material.angular.io/components/slide-toggle/overview or custom component. Minus of it - preloding theme css file and customise through overrides

• pInputTextarea (Matched 2):
  Could be own component

[Iloveall]

Tickets by difficulty order:

#1869
#1874
#1876
#1877
#1878
#1879
#1880
#1881
#1871

Medium

#1875
#1870
#1873

For my point it will take much more time that above issues. Also still option update to v19 (after above are migrated) and fix css, as not a lot styles will left after above issues migrated

#1872
#1882
#1883

[smadbe]

ok 👍 Globally what things are hard and has been done by others already, I am more in favor of taking the code in a custom component that we manage (and include the license if needed) than depending on external packages.