Angular learners
You’re learning Angular right now and want your apps to look and feel better, not just function correctly. This course helps you move from “it works” to “it feels right.”
Angular Styling & Animations (for Angular 2+)
For Angular 2+: Learn how to use dynamic styles and powerful animations to create beautiful Angular apps
Course Overview
About This Course
You’ve got the business logic working, the data flows, the routes load—and yet the app still feels flat. Maybe your UI looks “done” but doesn’t guide the user, doesn’t react, and doesn’t communicate what’s happening.
In this course, you’ll focus on the tools Angular gives you to make your UI feel alive: styling that can change at runtime and animations that support the flow of the page. It’s not a CSS basics class—you’ll work with Angular’s own approach so your app stays reactive and user-friendly.
By the end, you’ll be able to confidently style entire apps or individual components, adjust styles dynamically, and add animations that make interactions clearer. You’ll know how to bring polish to elements, lists, and navigation so your Angular apps feel intentional instead of static.
What You'll Learn
You’ll use Angular’s styling options plus the Angular Animation package to control UI behavior at runtime—from component-level styles to route-based motion.
Dynamic component styling
Apply styles to Angular components and the elements inside them, then change that styling dynamically so the UI reacts to state changes instead of staying static.
App vs component scope
Decide when to style the whole web app versus individual components you built, so your styling strategy matches how your Angular UI is structured.
Runtime style adjustments
Use Angular’s built-in tools to adjust styles at runtime, enabling responsive visual feedback that supports usability and communicates what’s happening in the interface.
CSS transitions and animations
Create smooth effects with vanilla CSS transitions and animations, so you can enhance interactions even before reaching for Angular’s animation system.
Angular Animation triggers
Build and configure animations with Angular’s Animation package using triggers, states, styles, and transitions to create predictable, reusable motion in your app.
Advanced animation techniques
Combine advanced features like animation groups, keyframes, and callbacks to orchestrate more complex sequences, including animations tied to element appearance and removal.
Ready to get started?
See enrollment optionsPrerequisites
Basic Angular (2 or 4) knowledge is required.
Basic CSS knowledge is required.
Basic CSS Transitions & Animations knowledge is a plus (no Angular Animations knowledge is required).
Who Is This Course For?
Frontend developers
You already know basic Angular and CSS, but your interfaces still feel static or randomly styled. You want a clear, Angular-focused way to improve user experience with motion and feedback.
UX-focused builders
You care about usability and want your UI to communicate flow and state to the user. If styling and animation in Angular components still feels like a mystery, this is your next step.
Curriculum Overview
Start NowPreview the structure and pacing of this course before you begin.
Getting Started22m
- 01Introduction2:12 min
- 02Understanding the Prerequisites2:55 min
- 03Join our Online Learning Community0:00 min
- 04Creating a Project (Course Setup)3:46 min
- 05Our First Project9:38 min
- 06The Structure of This Course1:48 min
- 07How to get the Most out of this Course1:50 min
- 08The Academind Pro Referral Program0:00 min
Styling Angular Apps Dynamically1h 46m
- 01Module Introduction1:21 min
- 02Adding Application-wide Styles1:57 min
- 03Let's Practice Application-wide Styles5:50 min
- 04Adding CSS Frameworks or External Styles to Your App4:30 min
- 05How to Add Global Styles in a CLI Project2:58 min
- 06How to use NPM to install CSS Frameworks3:11 min
- 07Understanding Component-scoped Styles1:09 min
- 08Using Component-Scoped Styles3:01 min
- 09Using Inline Styles in Components1:41 min
- 10Using Tags in Component Templates2:11 min
- 11The Theory Behind Angular's View Encapsulation6:12 min
- 12How Angular Emulates the Shadow DOM3:03 min
- 13Changing the View Encapsulation Behavior1:57 min
- 14Using the Native Shadow DOM3:25 min
- 15How to Turn Off View Encapsulation1:49 min
- 16Special CSS Selectors: :host3:53 min
- 17Using the Function Form of :host1:46 min
- 18Styling Components by Using their Selector2:09 min
- 19Special CSS Selectors: :host-context4:36 min
- 20Special CSS Selectors: /deep/3:58 min
- 21Understanding ngClass Syntax2:02 min
- 22Using ngClass to Add CSS Classes Dynamically3:42 min
- 23Understanding ngStyle Syntax2:00 min
- 24Using ngStyle to Dynamically Adjust CSS Styles2:40 min
- 25ngStyle: camelCase vs 'real-name'0:00 min
- 26Using the Angular Renderer to Adjust CSS Styles7:04 min
- 27Project: Introduction to the Course Project3:35 min
- 28Project: Adding Bootstrap Styling (CSS Framework)2:54 min
- 29Project: Planning the Next Steps2:39 min
- 30Project: Adding Margin (Component-scoped)1:36 min
- 31Project: Styling Items in A List4:18 min
- 32Project: Dynamically Mark Items4:47 min
- 33Project: Challenge - Style Status Changes1:51 min
- 34Project: Let's Style Status Labels3:25 min
- 35Project: Styling Inactive Items & Finishing Touches3:45 min
Moving Things with CSS Animations33m
- 01Module Introduction1:00 min
- 02Understanding the CSS Transition Property1:44 min
- 03Using the Transition Property to Add Transitions3:39 min
- 04More About the CSS Transition Property & Timing Functions0:00 min
- 05Configuring Multiple Transitions3:09 min
- 06Understanding the CSS Animation Property2:18 min
- 07More About the CSS Animation Property0:00 min
- 08Using the Animation Property to Add Animations7:15 min
- 09Project: Your Challenge!1:30 min
- 10Project: Implementing an Animated Loading Bar4:40 min
- 11Project: Transitioning Border Colors1:53 min
- 12Project: Animating the Selection ("marked") of List Items2:27 min
- 13Transitions vs Animations vs Angular Animations4:24 min
Diving into the Angular Animation Package1h 28m
- 01Module Introduction1:08 min
- 02How Animations work in Angular4:05 min
- 03Browser Support & Polyfills3:42 min
- 04Unlocking Animations with the Right Module1:50 min
- 05Getting Started with Triggers and States7:48 min
- 06Assigning Triggers to Elements in the Template2:47 min
- 07Switching Trigger States Dynamically3:45 min
- 08Adding Transitions between States5:56 min
- 09Using Multiple Transitions2:03 min
- 10Build more Complex Triggers with More States3:41 min
- 11Configuring Elegant Transitions When Using Many States2:34 min
- 12Understand the Re-Usability of Triggers2:21 min
- 13Using Multiple Triggers6:41 min
- 14Creating Multi-Step Transitions6:07 min
- 15Multi-Step Transitions and Temporary Styles3:08 min
- 16A Possible Bug0:00 min
- 17Styling States and Animations Correctly4:36 min
- 18CSS Animations vs Angular Animations3:33 min
- 19Outsourcing Animations3:05 min
- 20Project: Your Challenge!2:55 min
- 21Project: Setting Up Animations1:58 min
- 22Project: Adding Triggers and States5:43 min
- 23Project: Adding Transitions2:14 min
- 24Project: Using Multi-Step Transitions2:22 min
- 25Project: Cleaning Up Some CSS2:23 min
- 26Project: Using Temporary Styles in Transitions2:19 min
Becoming an Angular Animations Pro1h 53m
- 01Module Introduction1:24 min
- 02Animations We Can't Create As Of Now5:51 min
- 03Using the "void" State in Transitions3:19 min
- 04Using the "*" Wildcard State in Transitions3:52 min
- 05Using Dynamic Dimensionial Properties7:03 min
- 06Animating Lists3:51 min
- 07Using Animation Groups for Parallel Animations5:25 min
- 08Understanding Timing Functions (ease-in etc)6:16 min
- 09Control Everything with Animation Keyframes8:24 min
- 10Multi-Step Transitions vs Animation Groups vs Keyframes4:43 min
- 11Reacting to Animation Events4:36 min
- 12A First Summary0:54 min
- 13Project: Next Steps & Your Challenge1:45 min
- 14Project: Adding a Basic List Animation5:33 min
- 15Project: Creating a Better List Animation with Keyframes5:16 min
- 16Project: Creating a Staggered List6:14 min
- 17Project: Sliding Things Around4:50 min
- 18Project: Sliding List Items Around5:28 min
- 19Project: Synchronizing Animations3:27 min
- 20Project: Animating a Button depending on Form Validity7:24 min
- 21How to Animate Routing2:27 min
- 22Project: Creating a Basic Route Animation (Fade-in-out)9:32 min
- 23Project: Getting Fancy: A Slide-down Route Animation4:24 min
- 24Project Wrap Up1:09 min
New Animation Features with Angular 4.258m
- 01Module Introduction2:24 min
- 02Using the new query() Method6:20 min
- 03More on query()2:40 min
- 04Special Selectors for query()5:34 min
- 05All Special Selectors & Full query() Docs0:00 min
- 06query() Options1:44 min
- 07Combining query() Selectors2:05 min
- 08Adding Query to the Course Project6:39 min
- 09Fixing a Small Bug with query() and the Course Project0:40 min
- 10Easy Staggering Animations with stagger()8:11 min
- 11Creating Re-Usable Animations4:23 min
- 12Creating and Running Animations Programmatically4:44 min
- 13Improved Route Animations10:43 min
- 14An Issue with Route Animations1:44 min
- 15Wrap Up0:39 min
Course Roundup1m
- 01Roundup1:29 min
Ready to Get Started?
Choose the option that works best for you.
Single Course
Angular Styling & Animations (for Angular 2+)
One Payment. Lifetime Access.
$69one-time
- One-time payment
- All future updates for this course
- Downloadable resources & code
- Certificate of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Lifetime access
Most Popular
All-Access Membership
Everything we teach. One subscription.
$25/mo
$4,729+ worth of courses
- Full access to all courses
- All future courses included
- Downloadable resources & code
- Certificates of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Cancel anytime