Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Angular Styling & Animations (for Angular 2+)
Getting Started
Introduction (2:12)
Understanding the Prerequisites (2:55)
Join our Online Learning Community
Creating a Project (Course Setup) (3:46)
Our First Project (9:38)
The Structure of This Course (1:48)
How to get the Most out of this Course (1:50)
The Academind Pro Referral Program
Styling Angular Apps Dynamically
Module Introduction (1:21)
Adding Application-wide Styles (1:57)
Let's Practice Application-wide Styles (5:50)
Adding CSS Frameworks or External Styles to Your App (4:30)
How to Add Global Styles in a CLI Project (2:58)
How to use NPM to install CSS Frameworks (3:11)
Understanding Component-scoped Styles (1:09)
Using Component-Scoped Styles (3:01)
Using Inline Styles in Components (1:41)
Using Tags in Component Templates (2:11)
The Theory Behind Angular's View Encapsulation (6:12)
How Angular Emulates the Shadow DOM (3:03)
Changing the View Encapsulation Behavior (1:57)
Using the Native Shadow DOM (3:25)
How to Turn Off View Encapsulation (1:49)
Special CSS Selectors: :host (3:53)
Using the Function Form of :host (1:46)
Styling Components by Using their Selector (2:09)
Special CSS Selectors: :host-context (4:36)
Special CSS Selectors: /deep/ (3:58)
Understanding ngClass Syntax (2:02)
Using ngClass to Add CSS Classes Dynamically (3:42)
Understanding ngStyle Syntax (2:00)
Using ngStyle to Dynamically Adjust CSS Styles (2:40)
ngStyle: camelCase vs 'real-name'
Using the Angular Renderer to Adjust CSS Styles (7:04)
Project: Introduction to the Course Project (3:35)
Project: Adding Bootstrap Styling (CSS Framework) (2:54)
Project: Planning the Next Steps (2:39)
Project: Adding Margin (Component-scoped) (1:36)
Project: Styling Items in A List (4:18)
Project: Dynamically Mark Items (4:47)
Project: Challenge - Style Status Changes (1:51)
Project: Let's Style Status Labels (3:25)
Project: Styling Inactive Items & Finishing Touches (3:45)
Moving Things with CSS Animations
Module Introduction (1:00)
Understanding the CSS Transition Property (1:44)
Using the Transition Property to Add Transitions (3:39)
More About the CSS Transition Property & Timing Functions
Configuring Multiple Transitions (3:09)
Understanding the CSS Animation Property (2:18)
More About the CSS Animation Property
Using the Animation Property to Add Animations (7:15)
Project: Your Challenge! (1:30)
Project: Implementing an Animated Loading Bar (4:40)
Project: Transitioning Border Colors (1:53)
Project: Animating the Selection ("marked") of List Items (2:27)
Transitions vs Animations vs Angular Animations (4:24)
Diving into the Angular Animation Package
Module Introduction (1:08)
How Animations work in Angular (4:05)
Browser Support & Polyfills (3:42)
Unlocking Animations with the Right Module (1:50)
Getting Started with Triggers and States (7:48)
Assigning Triggers to Elements in the Template (2:47)
Switching Trigger States Dynamically (3:45)
Adding Transitions between States (5:56)
Using Multiple Transitions (2:03)
Build more Complex Triggers with More States (3:41)
Configuring Elegant Transitions When Using Many States (2:34)
Understand the Re-Usability of Triggers (2:21)
Using Multiple Triggers (6:41)
Creating Multi-Step Transitions (6:07)
Multi-Step Transitions and Temporary Styles (3:08)
A Possible Bug
Styling States and Animations Correctly (4:36)
CSS Animations vs Angular Animations (3:33)
Outsourcing Animations (3:05)
Project: Your Challenge! (2:55)
Project: Setting Up Animations (1:58)
Project: Adding Triggers and States (5:43)
Project: Adding Transitions (2:14)
Project: Using Multi-Step Transitions (2:22)
Project: Cleaning Up Some CSS (2:23)
Project: Using Temporary Styles in Transitions (2:19)
Becoming an Angular Animations Pro
Module Introduction (1:24)
Animations We Can't Create As Of Now (5:51)
Using the "void" State in Transitions (3:19)
Using the "*" Wildcard State in Transitions (3:52)
Using Dynamic Dimensionial Properties (7:03)
Animating Lists (3:51)
Using Animation Groups for Parallel Animations (5:25)
Understanding Timing Functions (ease-in etc) (6:16)
Control Everything with Animation Keyframes (8:24)
Multi-Step Transitions vs Animation Groups vs Keyframes (4:43)
Reacting to Animation Events (4:36)
A First Summary (0:54)
Project: Next Steps & Your Challenge (1:45)
Project: Adding a Basic List Animation (5:33)
Project: Creating a Better List Animation with Keyframes (5:16)
Project: Creating a Staggered List (6:14)
Project: Sliding Things Around (4:50)
Project: Sliding List Items Around (5:28)
Project: Synchronizing Animations (3:27)
Project: Animating a Button depending on Form Validity (7:24)
How to Animate Routing (2:27)
Project: Creating a Basic Route Animation (Fade-in-out) (9:32)
Project: Getting Fancy: A Slide-down Route Animation (4:24)
Project Wrap Up (1:09)
New Animation Features with Angular 4.2
Module Introduction (2:24)
Using the new query() Method (6:20)
More on query() (2:40)
Special Selectors for query() (5:34)
All Special Selectors & Full query() Docs
query() Options (1:44)
Combining query() Selectors (2:05)
Adding Query to the Course Project (6:39)
Fixing a Small Bug with query() and the Course Project (0:40)
Easy Staggering Animations with stagger() (8:11)
Creating Re-Usable Animations (4:23)
Creating and Running Animations Programmatically (4:44)
Improved Route Animations (10:43)
An Issue with Route Animations (1:44)
Wrap Up (0:39)
Course Roundup
Roundup (1:29)
ngStyle: camelCase vs 'real-name'
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock