Name: Angular 2+: Angular Styling and Animations
Rating: 4.4 (760 reviews)

Angular 2+: Angular Styling and Animations

Get ready for your exam by enrolling in our comprehensive training course. This course includes a full set of instructional videos designed to equip you with in-depth knowledge essential for passing the certification exam with flying colors.

$14.99 / $24.99

Getting Started

1. Introduction
2m 12s
2. Understanding the Prerequisites
2m 56s
3. Creating a Project (Course Setup)
3m 46s
4. Our First Project
9m 38s
5. The Structure of This Course
1m 48s
6. How to get the Most out of this Course
1m 50s

Styling Angular Apps Dynamically

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

Moving Things with CSS Animations

1. Module Introduction
1m
2. Understanding the CSS Transition Property
1m 45s
3. Using the Transition Property to Add Transitions
3m 40s
4. Configuring Multiple Transitions
3m 10s
5. Understanding the CSS Animation Property
2m 19s
6. Using the Animation Property to Add Animations
7m 15s
7. Project: Your Challenge!
1m 30s
8. Project: Implementing an Animated Loading Bar
4m 41s
9. Project: Transitioning Border Colors
1m 54s
10. Project: Animating the Selection ("marked") of List Items
2m 27s
11. Transitions vs Animations vs Angular Animations
4m 24s

Diving into the Angular Animation Package

1. Module Introduction
1m 8s
2. How Animations work in Angular
4m 5s
3. Browser Support & Polyfills
3m 42s
4. Unlocking Animations with the Right Module
1m 50s
5. Getting Started with Triggers and States
7m 49s
6. Assigning Triggers to Elements in the Template
2m 47s
7. Switching Trigger States Dynamically
3m 45s
8. Adding Transitions between States
5m 57s
9. Using Multiple Transitions
2m 3s
10. Build more Complex Triggers with More States
3m 41s
11. Configuring Elegant Transitions When Using Many States
2m 35s
12. Understand the Re-Usability of Triggers
2m 22s
13. Using Multiple Triggers
6m 41s
14. Creating Multi-Step Transitions
6m 7s
15. Multi-Step Transitions and Temporary Styles
3m 8s
16. Styling States and Animations Correctly
4m 36s
17. CSS Animations vs Angular Animations
3m 34s
18. Outsourcing Animations
3m 5s
19. Project: Your Challenge!
2m 55s
20. Project: Setting Up Animations
1m 58s
21. Project: Adding Triggers and States
5m 43s
22. Project: Adding Transitions
2m 15s
23. Project: Using Multi-Step Transitions
2m 22s
24. Project: Cleaning Up Some CSS
2m 23s
25. Project: Using Temporary Styles in Transitions
2m 19s

Becoming an Angular Animations Pro

1. Module Introduction
54s
2. Animations We Can't Create As Of Now
5m 51s
3. Using the "void" State in Transitions
3m 19s
4. Using the "*" Wildcard State in Transitions
3m 52s
5. Using Dynamic Dimensionial Properties
7m 3s
6. Animating Lists
3m 51s
7. Using Animation Groups for Parallel Animations
5m 25s
8. Understanding Timing Functions (ease-in etc)
6m 16s
9. Control Everything with Animation Keyframes
8m 24s
10. Multi-Step Transitions vs Animation Groups vs Keyframes
4m 43s
11. Reacting to Animation Events
4m 37s
12. A First Summary
1m 24s
13. Project: Next Steps & Your Challenge
1m 45s
14. Project: Adding a Basic List Animation
5m 33s
15. Project: Creating a Better List Animation with Keyframes
5m 17s
16. Project: Creating a Staggered List
6m 14s
17. Project: Sliding Things Around
4m 51s
18. Project: Sliding List Items Around
5m 28s
19. Project: Synchronizing Animations
3m 27s
20. Project: Animating a Button depending on Form Validity
7m 24s
21. How to Animate Routing
2m 27s
22. Project: Creating a Basic Route Animation (Fade-in-out)
9m 32s
23. Project: Getting Fancy: A Slide-down Route Animation
4m 24s
24. Project Wrap Up
1m 9s

New Animation Features with Angular 4.2

1. Module Introduction
2m 25s
2. Using the new query() Method
6m 20s
3. More on query()
2m 40s
4. Special Selectors for query()
5m 35s
5. query() Options
1m 45s
6. Combining query() Selectors
2m 5s
7. Adding Query to the Course Project
6m 40s
8. Fixing a Small Bug with query() and the Course Project
41s
9. Easy Staggering Animations with stagger()
8m 11s
10. Creating Re-Usable Animations
4m 23s
11. Creating and Running Animations Programmatically
4m 44s
12. Improved Route Animations
10m 43s
13. An Issue with Route Animations
1m 45s
14. Wrap Up
39s