Custom Components Templates

Slide 1

Slide 1 text

Custom Components Templates eliraneliassy

Slide 2

Slide 2 text

e-square.io — Founder & CEO @ e-square.io — GDE for Angular & Web Technologies — Writer for AngularInDepth — Community leader About mySelf

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

e-square.io Live Coding…

Slide 6

Slide 6 text

e-square.io Let’s start coding…

Slide 7

Slide 7 text

e-square.io The Swiper Template

Slide 8

Slide 8 text

e-square.io Scroll-snap-type Swiper Styles

Slide 9

Slide 9 text

e-square.io Adding bu!ons support Styling

Slide 10

Slide 10 text

e-square.io Adding bu!ons support Functionality

Slide 11

Slide 11 text

e-square.io Adding bu!ons support Functionality

Slide 12

Slide 12 text

e-square.io Adding bu!ons support Functionality

Slide 13

Slide 13 text

e-square.io Using the swiper Consumer 1

Slide 14

Slide 14 text

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…

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

e-square.io What if… • We can give our component consumers full control on the template?

Slide 17

Slide 17 text

e-square.io Using ngTemplateOutlet

Slide 18

Slide 18 text

e-square.io Using ngTemplateOutlet

Slide 19

Slide 19 text

e-square.io Using ngTemplateOutlet

Slide 20

Slide 20 text

e-square.io Consumer 2

Slide 21

Slide 21 text

e-square.io Adding navigation

Slide 22

Slide 22 text

e-square.io Using the navigation

Slide 23

Slide 23 text

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!

Slide 24

Slide 24 text

We’re here to help you!

Slide 25

Slide 25 text

Thank You @eliraneliassy eliran.eliassy@gmail.com eliraneliassy https://eliassy.dev https://e-square.io