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:
![Ionic](https://res.cloudinary.com/practicaldev/image/fetch/s--76qQfBKY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/practicaldev/image/fetch/s--IBupPVzn--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/organization/profile_image/845/288b82aa-412f-40c5-ab05-0e408eff57d2.png)
![](https://res.cloudinary.com/practicaldev/image/fetch/s--AFZGHYK7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/practicaldev/image/fetch/s--j8BgQ2ZQ--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/77831/dd90b1ab-73fc-4b3a-a63b-3e824eaccc27.jpeg)
Why We Use Web Components
Max Lynch for Ionic ・ Jul 8 '19
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!
Top comments (0)