Adding Angular Components to your static site
Utilizing Web Components within Hugo Static Site Generator (or any static site), to take Stripe/PayPal payments and more!
Why Angular Components
Because the people want it!
Demo
I plan to share a more in depth course on how to build all of this! For now I thought it would be cool just to see it all in action. Notice how after the site loads Firebase kicks in and checks to see if you are a pro member then dynamically hides items using a webcomponent that understands user state. The great part here is that I have many of the Angular items that access firebase already created and I don't have to reinvent the wheel!
Who do I have to thank for teaching all of this to me? Jeff Delaney at https://fireship.io/courses/stripe-payments/
Allowing User
It is as easy as using <ajonp-allow-if> to wrap around any element and then use display none within that component.
No more ads
An example of this is when a user registers and becomes a Pro member of AJonP, they will no longer see ads.For this I can just wrap my Hugo Go Partial:
Angular Parts
The template is pretty straight forward, Angular either shows the component or removes it based on the *ngIf.
Angular Component
Some things to note are the code decorations. This allows for you to pass in all of these different items as attributes on the ajonp-allow-if component. In our example above I pass in level="not-user" to the @Input level decorator.What is wonderful about using Angular is that you get all the nice dependency injection that you would normally get with a standard Angular component!
Here you can see I am utilizing the full firebase library for authentication, which is sweet!
