Tutorial on how to create dynamic modal in Angular based on Figma design. I want to present you how to make HTML structure with industry standard BEM syntax, how to style it with SCSS, how to load it dynamically by using reference to view container and how to later on smoothly animate modal on creation. Stay tuned guys for more videos!
For more visit my website: https://www.michaelolech.com
Timestamps
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
1. Intro (0:00)
2. Figma design timelapse (0:56)
3. Figma design overview (2:39)
4. Adding new component (3:03)
5. Creating HTML structure (4:10)
6. Styling modal with SCSS (6:36)
7. Styling overlay (9:50)
8. Styling close button (11:53)
9. Styling text content (12:56)
10. Styling input (15:11)
11. Custom elements styling issues (17:29)
12. Creating service for dynamic loading (19:09)
13. Newsletter modal logic (21:34)
14. App template structure (22:39)
15. App component logic (23:32)
16. Testing app component logic (27:03)
17. Adding animation (27:39)
18. Adding form validation (29:21)
19. Final result (30:50)
Music
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
1. (Intro) Lifestyle - Alex-Productions
Link: / vlog-stylish-lo-fi-hip-hop-music-lofi-beat...
2. (Figma design timelapse) Chill Vibes - Alex-Productions
Link: / chill-dreamy-lo-fi-hip-hop-background-musi...
コメント