English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 6 Hours | 1.31 GB
Learn how to use dynamic Styles and powerful Animations to create beautiful Angular Apps
You finished the business logic of your web page and you’re done, right? No! Adding fitting styles and animations to a web page tremendously improves the user experience!
It’s more than a little bonus – animations and styles help the user understand the flow of your page, pass on feedback to the user and overall improve the usability of your page.
This course teaches you which tools Angular gives you to dynamically style and animate your web page. This is not a CSS basics course – this course will really dive into the rich toolset Angular ships with, allowing you to build a reactive, user-friendly web application.
Just think about your favorite web apps: How many of these look ugly, seem to be styled randomly (and statically) and use no animations? Probably not that many – time to join the club of developers creating awesome user experiences!
This is what you’ll learn!
- How Angular helps you with styling and animating your web page
- What “dynamic” styling and animating means
- How you may either style the whole web app or individual components you built
- Which tools Angular offers you to adjust styles at runtime
- How you can use vanilla CSS to build nice transitions and animations
- All about Angular’s Animation package: Building, configuring and using triggers, states, styles, transitions and more!
- Advanced Animation features like Animation groups, keyframes or callbacks
- How to animate the appearance and removal of elements/ components
- How to animate lists
- How to animate routing
- And more!
Table of Contents
Getting Started
1 Introduction
2 Understanding the Prerequisites
3 Creating a Project Course Setup
4 Our First Project
5 Course Structure
6 How to get the Most out of this Course
Styling Angular Apps Dynamically
7 Module Introduction
8 Adding Application-wide Styles
9 Lets Practice Application-wide Styles
10 Adding CSS Frameworks or External Styles to Your App
11 How to Add Global Styles in a CLI Project
12 How to use NPM to install CSS Frameworks
13 Understanding Component-scoped Styles
14 Using Component-Scoped Styles
15 Using Inline Styles in Components
16 Using style Tags in Component Templates
17 The Theory Behind Angulars View Encapsulation
18 How Angular Emulates the Shadow DOM
19 Changing the View Encapsulation Behavior
20 Using the Native Shadow DOM
21 How to Turn Off View Encapsulation
22 Special CSS Selectors host
23 Using the Function Form of host
24 Styling Components by Using their Selector
25 Special CSS Selectors host-context
26 Special CSS Selectors deep
27 Understanding ngClass Syntax
28 Using ngClass to Add CSS Classes Dynamically
29 Understanding ngStyle Syntax
30 Using ngStyle to Dynamically Adjust CSS Styles
31 ngStyle camelCase vs real-name.html
32 Using the Angular Renderer to Adjust CSS Styles
33 Project Introduction to the Course Project
34 Project Adding Bootstrap Styling CSS Framework
35 Project Planning the Next Steps
36 Project Adding Margin Component-scoped
37 Project Styling Items in A List
38 Project Dynamically Mark Items
39 Project Challenge – Style Status Changes
40 Project Lets Style Status Labels
41 Project Styling Inactive Items Finishing Touches
Moving Things with CSS Animations
42 Module Introduction
43 Understanding the CSS Transition Property
44 Using the Transition Property to Add Transitions
45 More About the CSS Transition Property Timing Functions.html
46 Configuring Multiple Transitions
47 Understanding the CSS Animation Property
48 More About the CSS Animation Property.html
49 Using the Animation Property to Add Animations
50 Project Your Challenge
51 Project Implementing an Animated Loading Bar
52 Project Transitioning Border Colors
53 Project Animating the Selection marked of List Items
54 Transitions vs Animations vs Angular Animations
Diving into the Angular Animation Package
55 Want to use Angular 2 instead of Angular 4.html
56 Module Introduction
57 How Animations work in Angular
58 Browser Support Polyfills
59 Unlocking Animations with the Right Module
60 Getting Started with Triggers and States
61 Which Properties are Animatable.html
62 Assigning Triggers to Elements in the Template
63 Switching Trigger States Dynamically
64 Adding Transitions between States
65 Using Multiple Transitions
66 Build more Complex Triggers with More States
67 Configuring Elegant Transitions When Using Many States
68 Understand the Re-Usability of Triggers
69 Using Multiple Triggers
70 Creating Multi-Step Transitions
71 Multi-Step Transitions and Temporary Styles
72 A Bug in Angular 4 Animations.html
73 Styling States and Animations Correctly
74 CSS Animations vs Angular Animations
75 Outsourcing Animations
76 Project Your Challenge
77 Project Setting Up Animations
78 Project Adding Triggers and States
79 Project Adding Transitions
80 Project Using Multi-Step Transitions
81 Project Cleaning Up Some CSS
82 Project Using Temporary Styles in Transitions
Becoming an Angular Animations Pro
83 Module Introduction
84 Animations We Cant Create As Of Now
85 Using the void State in Transitions
86 Using the Wildcard State in Transitions
87 Using Dynamic Dimensionial Properties
88 Animating Lists
89 Using Animation Groups for Parallel Animations
90 Understanding Timing Functions ease-in etc
91 Control Everything with Animation Keyframes
92 Multi-Step Transitions vs Animation Groups vs Keyframes
93 Reacting to Animation Events
94 A First Summary
95 Project Next Steps Your Challenge
96 Project Adding a Basic List Animation
97 Project Creating a Better List Animation with Keyframes
98 Project Creating a Staggered List
99 Project Sliding Things Around
100 Project Sliding List Items Around
101 Project Synchronizing Animations
102 Project Animating a Button depending on Form Validity
103 How to Animate Routing
104 Project Creating a Basic Route Animation Fade-in-out
105 Project Getting Fancy A Slide-down Route Animation
106 Project Wrap Up
Course Roundup
107 Course Roundup
Resolve the captcha to access the links!