Adding Angular Reactive Form Web Components to your static site

Shoutout to Alligator.io for all the help on this one!

Adding dynamic features to a static site.

This is a multi part series covering all the different types of Web Components I am using on the https://ajonp.com site currently. I just wanted to show how you can use each of them at a somewhat high level.

I was inspired to share more by Max's post:

Why We Use Web Components

Max Lynch for Ionic ・ Jul 8 '19

#webcomponents #shadowdom #ionicframework #stencil

Fully Functioning Angular Reactive Form in Web Component

This is SUPER simple, it sets the default value in the form to Alex, we will take this further in another part of the series to include more validations.

Console output for example

This shows the formGroup values with displayName: 'Alex' as expected.

Issue with using ion-input

Logged an issue (which had me banging my head for 24 hours) with Ionic repo.

The BEST Part

Now we can package up a simple example as an NPM package (or GitHub package) and utilize it in other apps.

Let me know what you think!