Angular 2+: Angular Styling and Animations

What’s included

$14.99 / $24.99

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.

4.59

Pay once, own it forever

Video Courses

Getting Started

Lectures	Duration
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

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

Lectures	Duration
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

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

Lectures	Duration
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

1. Module Introduction

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

Lectures	Duration
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

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

Lectures	Duration
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

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

Lectures	Duration
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

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