Join our Online Learning Community
Understanding the Prerequisites
Important: Creating a Project with the Angular CLI
Creating a Project (Course Setup)
The Structure of This Course
How to get the Most out of this Course
Adding Application-wide Styles
Let's Practice Application-wide Styles
Adding CSS Frameworks or External Styles to Your App
How to Add Global Styles in a CLI Project
How to use NPM to install CSS Frameworks
Understanding Component-scoped Styles
Using Component-Scoped Styles
Using Inline Styles in Components
Using <style> Tags in Component Templates
The Theory Behind Angular's View Encapsulation
How Angular Emulates the Shadow DOM
Changing the View Encapsulation Behavior
Using the Native Shadow DOM
How to Turn Off View Encapsulation
Special CSS Selectors: :host
Using the Function Form of :host
Styling Components by Using their Selector
Special CSS Selectors: :host-context
Special CSS Selectors: /deep/
Understanding ngClass Syntax
Using ngClass to Add CSS Classes Dynamically
Understanding ngStyle Syntax
Using ngStyle to Dynamically Adjust CSS Styles
ngStyle: camelCase vs 'real-name'
Using the Angular Renderer to Adjust CSS Styles
Project: Introduction to the Course Project
Project: Adding Bootstrap Styling (CSS Framework)
Project: Planning the Next Steps
Project: Adding Margin (Component-scoped)
Project: Styling Items in A List
Project: Dynamically Mark Items
Project: Challenge - Style Status Changes
Project: Let's Style Status Labels
Project: Styling Inactive Items & Finishing Touches
Understanding the CSS Transition Property
Using the Transition Property to Add Transitions
More About the CSS Transition Property & Timing Functions
Configuring Multiple Transitions
Understanding the CSS Animation Property
More About the CSS Animation Property
Using the Animation Property to Add Animations
Project: Implementing an Animated Loading Bar
Project: Transitioning Border Colors
Project: Animating the Selection ("marked") of List Items
Transitions vs Animations vs Angular Animations
Want to use Angular 2 instead of Angular 4?
How Animations work in Angular
Browser Support & Polyfills
Unlocking Animations with the Right Module
Getting Started with Triggers and States
Which Properties are Animatable?
Assigning Triggers to Elements in the Template
Switching Trigger States Dynamically
Adding Transitions between States
Using Multiple Transitions
Build more Complex Triggers with More States
Configuring Elegant Transitions When Using Many States
Understand the Re-Usability of Triggers
Creating Multi-Step Transitions
Multi-Step Transitions and Temporary Styles
A Bug in Angular 4 Animations
Styling States and Animations Correctly
CSS Animations vs Angular Animations
Project: Setting Up Animations
Project: Adding Triggers and States
Project: Adding Transitions
Project: Using Multi-Step Transitions
Project: Cleaning Up Some CSS
Project: Using Temporary Styles in Transitions
Animations We Can't Create As Of Now
Using the "void" State in Transitions
Using the "*" Wildcard State in Transitions
Using Dynamic Dimensionial Properties
Using Animation Groups for Parallel Animations
Understanding Timing Functions (ease-in etc)
Control Everything with Animation Keyframes
Multi-Step Transitions vs Animation Groups vs Keyframes
Reacting to Animation Events
Project: Next Steps & Your Challenge
Project: Adding a Basic List Animation
Project: Creating a Better List Animation with Keyframes
Project: Creating a Staggered List
Project: Sliding Things Around
Project: Sliding List Items Around
Project: Synchronizing Animations
Project: Animating a Button depending on Form Validity
Project: Creating a Basic Route Animation (Fade-in-out)
Project: Getting Fancy: A Slide-down Route Animation
Using the new query() Method
Special Selectors for query()
All Special Selectors & Full query() Docs
Combining query() Selectors
Adding Query to the Course Project
Fixing a Small Bug with query() and the Course Project
Easy Staggering Animations with stagger()
Creating Re-Usable Animations
Creating and Running Animations Programmatically
Improved Route Animations
An Issue with Route Animations