ng-keralam - vertual conference 2022

Configurable Angular CTAs

Transcript

1. The cheapest, fastest, and most reliable components are those that aren’t there” - Gordon Bell
2. CTA buttons - the angular way
3. CTAs
4. Who am i? BHARATH RAVI - @_bharath_ravi Angular enthusiast Building the world’s best contract management solution at .com We’re hiring! Let’s talk - jobs@spotdraft.com
5. Disclaimer No best practice recommendation!
6. CTA action Service Wrapper directive Controls action on each CTA Triggers actions based on multiple conditions. Holds configurations applied to the CTAs MILESTONES Bundle it all in one Bundling the whole logic to one structural directive
7. CTA action Service
8. CTA action Service • Defines the action to take place on click of the button. • Provide configurations to the button. Such as visibility, tooltip, disabled state etc…
9. BASE ACTION CLASS
10. Action config
11. Send action SErvice
12. USe action service
13. Wrapper directive *
14. Wrapper directive • Create a button wrapper component. • Define IBUTTONACTION, map to corresponding action service • Create a structural directive. • Attach the wrapper to document. • Move the service logic inside directive • Move click listener to directive
15. Wrapper component
16. Ibutton actions
22. Trigger click listener
23. https://github.com/BharathRavi27 /angular-configurable-ctas
24. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik and illustrations by Stories THANK you! Do you have any questions? @_bharath_ravi http://bharath-ravi.medium.com/ bharathravi27@gmail.com bharath@spotdraft.com