Custom Components Templates

It is an often scenario when you building one simple component, with the required functionality, and then these component consumers requesting support for more and more UI changes.

So what's the best way to customize components with Angular?
What are ThemplateRefs and how we can you the ngTemplateOutlet to let our consumers full control our components?

Join me for a session and find out how to create your own generic component template

Transcript

1. Custom Components Templates eliraneliassy
2. e-square.io — Founder & CEO @ e-square.io — GDE for Angular & Web Technologies — Writer for AngularInDepth — Community leader About mySelf
3. e-square.io The Story… • You = UI architect in a big company, creating components library • Every component used by more than 1 team • You’ve just asked to create a new imgae swiper component
4. e-square.io Requirements • Should get images sources as an Input • Should support trackpad swiping • Should have Next and Prev buttons to navigate in slides
5. e-square.io Live Coding…
6. e-square.io Let’s start coding…
7. e-square.io The Swiper Template
8. e-square.io Scroll-snap-type Swiper Styles
9. e-square.io Adding bu!ons support Styling
10. e-square.io Adding bu!ons support Functionality
11. e-square.io Adding bu!ons support Functionality
12. e-square.io Adding bu!ons support Functionality
13. e-square.io Using the swiper Consumer 1
14. e-square.io Things gets complicated… • Consumer 2 really likes your swiper • He really want you use it, but not for images • He also want to control the swiper navigation with his custom events • New “UI requirements” will probably keep coming…
15. e-square.io Let’s re-think… • Adding Inputs with ngIf’s to control the templates will do the work, but also will ruin your neat component
16. e-square.io What if… • We can give our component consumers full control on the template?
17. e-square.io Using ngTemplateOutlet
18. e-square.io Using ngTemplateOutlet
19. e-square.io Using ngTemplateOutlet
20. e-square.io Consumer 2
21. e-square.io Adding navigation
22. e-square.io Using the navigation
23. e-square.io Let’s summarise • Using ngTemplateOutlet can give our components consumers full control over the templates without adding redundant Input’s or ngIf’s • ngTemplateOutletContext can expose any inner component functionality • If you building UI library - use it almost everywhere!
24. We’re here to help you!
25. Thank You @eliraneliassy eliran.eliassy@gmail.com eliraneliassy https://eliassy.dev https://e-square.io