w3docs logo
Connexion

Angular Styling & Animations (for Angular 2+)

For Angular 2+: Learn how to use dynamic styles and powerful animations to create beautiful Angular apps

Start
  1. Courses
  3. Angular Styling & Animations (for Angular 2+)

You finished the business logic of your web page and you're done, right? No! Adding fitting styles and animations to a web page tremendously improves the user experience!

It's more than a little bonus - animations and styles help the user understand the flow of your page, pass on feedback to the user and overall improve the usability of your page.

This course teaches you which tools Angular gives you to dynamically style and animate your web page. This is not a CSS basics course - this course will really dive into the rich toolset Angular ships with, allowing you to build a reactive, user-friendly web application.

Just think about your favorite web apps: How many of these look ugly, seem to be styled randomly (and statically) and use no animations? Probably not that many - time to join the club of developers creating awesome user experiences!

This is what you'll learn!

  • How Angular helps you with styling and animating your web page
  • What "dynamic" styling and animating means
  • How you may either style the whole web app or individual components you built
  • Which tools Angular offers you to adjust styles at runtime
  • How you can use vanilla CSS to build nice transitions and animations
  • All about Angular's Animation package: Building, configuring and using triggers, states, styles, transitions and more!
  • Advanced Animation features like Animation groups, keyframes or callbacks
  • How to animate the appearance and removal of elements/ components
  • How to animate lists
  • How to animate routing
  • And more!

This is what the course offers - but is this course for you?

This course is for you if ...

  • ... you got (basic) Angular and CSS knowledge and feel like you need to learn more about adding/ using styles and animations in your Angular apps
  • ... you're learning Angular right now and you want to continue learning with more beautiful apps
  • ... you even already know the basics about styling and animating Angular apps but you feel like there still is some mystery regarding the styling/ animation of components

I'd be very happy to welcome you in this course!

Section: Getting Started

1. Introduction (2:12)
2. Understanding the Prerequisites (2:55)
3. Join our Online Learning Community (1:00)
4. Creating a Project (Course Setup) (3:46)
5. Our First Project (9:38)
6. The Structure of This Course (1:48)
7. How to get the Most out of this Course (1:50)

Section: Styling Angular Apps Dynamically

8. Module Introduction (1:21)
9. Adding Application-wide Styles (1:57)
10. Let's Practice Application-wide Styles (5:50)
11. Adding CSS Frameworks or External Styles to Your App (4:30)
12. How to Add Global Styles in a CLI Project (2:58)
13. How to use NPM to install CSS Frameworks (3:11)
14. Understanding Component-scoped Styles (1:09)
15. Using Component-Scoped Styles (3:01)
16. Using Inline Styles in Components (1:41)
17. Using Tags in Component Templates (2:11)
18. The Theory Behind Angular's View Encapsulation (6:12)
19. How Angular Emulates the Shadow DOM (3:03)
20. Changing the View Encapsulation Behavior (1:57)
21. Using the Native Shadow DOM (3:25)
22. How to Turn Off View Encapsulation (1:49)
23. Special CSS Selectors: :host (3:53)
24. Using the Function Form of :host (1:46)
25. Styling Components by Using their Selector (2:09)
26. Special CSS Selectors: :host-context (4:36)
27. pecial CSS Selectors: /deep/ (3:58)
28. Understanding ngClass Syntax (2:02)
29. Using ngClass to Add CSS Classes Dynamically (3:42)
30. Understanding ngStyle Syntax (2:00)
31. Using ngStyle to Dynamically Adjust CSS Styles (2:40)
32. ngStyle: camelCase vs 'real-name' (1:00)
33. Using the Angular Renderer to Adjust CSS Styles (7:04)
34. Project: Introduction to the Course Project (3:35)
35. Project: Adding Bootstrap Styling (CSS Framework) (3:54)
36. Project: Planning the Next Steps (2:39)
37. Project: Adding Margin (Component-scoped) (1:36)
38. Project: Styling Items in A List (4:18)
39. Project: Dynamically Mark Items (4:47)
40. Project: Challenge - Style Status Changes (1:51)
41. Project: Let's Style Status Labels (3:25)
42. Project: Styling Inactive Items & Finishing Touches (3:45)

Section: Moving Things with CSS Animations

43. Module Introduction (1:00)
44. Understanding the CSS Transition Property (1:44)
45. Using the Transition Property to Add Transitions (3:39)
46. More About the CSS Transition Property & Timing Functions (1:00)
47. Configuring Multiple Transitions (3:09)
48. Understanding the CSS Animation Property (2:18)
49. More About the CSS Animation Property (1:00)
50. Using the Animation Property to Add Animations (7:15)
51. Project: Your Challenge! (1:30)
52. Project: Implementing an Animated Loading Bar (4:40)
53. Project: Transitioning Border Colors (1:53)
54. Project: Animating the Selection ("marked") of List Items (2:27)
55. Transitions vs Animations vs Angular Animations (4:24)

Section: Diving into the Angular Animation Package

56. Module Introduction (1:08)
57. How Animations work in Angular (4:05)
58. Browser Support & Polyfills (3:42)
59. Unlocking Animations with the Right Module (1:50)
60. Getting Started with Triggers and States (7:48)
61. Assigning Triggers to Elements in the Template (2:47)
62. Switching Trigger States Dynamically (3:45)
63. Adding Transitions between States (5:56)
64. Using Multiple Transitions (2:03)
65. Build more Complex Triggers with More States (3:41)
66. Configuring Elegant Transitions When Using Many States (2:34)
67. Understand the Re-Usability of Triggers (2:21)
68. Using Multiple Triggers (6:41)
69. Creating Multi-Step Transitions (6:07)
70. Multi-Step Transitions and Temporary Styles (3:08)
71. A Possible Bug (1:00)
72. Styling States and Animations Correctly (4:36)
73. CSS Animations vs Angular Animations (3:33)
74. Outsourcing Animations (3:05)
75. Project: Your Challenge! (2:55)
76. Project: Setting Up Animations (1:58)
77. Project: Adding Triggers and States (5:43)
78. Project: Adding Transitions (2:13)
79. Project: Using Multi-Step Transitions (2:22)
80. Project: Cleaning Up Some CSS (2:23)
81. Project: Using Temporary Styles in Transitions (2:19)

Section: Becoming an Angular Animations Pro

82. Module Introduction (1:24)
83. Animations We Can't Create As Of Now (5:51)
84. Using the "void" State in Transitions (3:19)
85. Using the "*" Wildcard State in Transitions (3:52)
86. Using Dynamic Dimensionial Properties (7:03)
87. Animating Lists (3:51)
88. Using Animation Groups for Parallel Animations (5:25)
89. Understanding Timing Functions (ease-in etc) (6:16)
90. Control Everything with Animation Keyframes (8:24)
91. Multi-Step Transitions vs Animation Groups vs Keyframes (4:43)
92. Reacting to Animation Events (4:36)
93. A First Summary (0:54)
94. Project: Next Steps & Your Challenge (1:45)
95. Project: Adding a Basic List Animation (5:33)
96. Project: Creating a Better List Animation with Keyframes (5:16)
97. Project: Creating a Staggered List (6:14)
98. Project: Sliding Things Around (4:50)
99. Project: Sliding List Items Around (5:28)
100. Project: Synchronizing Animations (3:27)
101. Project: Animating a Button depending on Form Validity (7:24)
102. How to Animate Routing (2:27)
103. Project: Creating a Basic Route Animation (Fade-in-out) (9:32)
104. Project: Getting Fancy: A Slide-down Route Animation (4:24)
105. Project Wrap Up (1:09)

Section: New Animation Features with Angular 4.2

106. Module Introduction (2:24)
107. Using the new query() Method (6:20)
108. More on query() (2:40)
109. Special Selectors for query() (5:34)
110. All Special Selectors & Full query() Docs (1:00)
111. query() Options (1:44)
112. Combining query() Selectors (2:05)
113. Adding Query to the Course Project (6:39)
114. Fixing a Small Bug with query() and the Course Project (0:40)
115. Easy Staggering Animations with stagger() (8:11)
116. Creating Re-Usable Animations (4:23)
117. Creating and Running Animations Programmatically (4:44)
118. Improved Route Animations (10:43)
119. An Issue with Route Animations (1:44)
120. Wrap Up (0:39)

Section: Course Roundup

121. Roundup (1:29)

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.