IIRF Online > Development > Web Development > Angular > Angular Styling & Animations (for Angular 2+)
Angular Styling & Animations (for Angular 2+) by Udemy
For Angular 2+: Learn how to use dynamic Styles and powerful Animations to create beautiful Angular Apps
Course Highlights
- At the end of the course, students will be able to use the many features Angular offers to dynamically style and animate Angular apps
- Students will be able to style their Angular components, elements in these components and change that styling dynamically
- Students will be able to add complex animations, for example to animate the appearance of elements, lists or upon route changes
Skills you will learn!
Curriculum
8 Topics
Introduction
Join our Online Learning Community
Understanding the Prerequisites
Important: Creating a Project with the Angular CLI
Creating a Project (Course Setup)
Our First Project
The Structure of This Course
How to get the Most out of this Course
35 Topics
Module Introduction
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
13 Topics
Module Introduction
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: Your Challenge!
Project: Implementing an Animated Loading Bar
Project: Transitioning Border Colors
Project: Animating the Selection ("marked") of List Items
Transitions vs Animations vs Angular Animations
28 Topics
Want to use Angular 2 instead of Angular 4?
Module Introduction
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
Using Multiple 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
Outsourcing Animations
Project: Your Challenge!
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
24 Topics
Module Introduction
Animations We Can't Create As Of Now
Using the "void" State in Transitions
Using the "*" Wildcard State in Transitions
Using Dynamic Dimensionial Properties
Animating Lists
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
A First Summary
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
How to Animate Routing
Project: Creating a Basic Route Animation (Fade-in-out)
Project: Getting Fancy: A Slide-down Route Animation
Project Wrap Up
15 Topics
Module Introduction
Using the new query() Method
More on query()
Special Selectors for query()
All Special Selectors & Full query() Docs
query() Options
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
Wrap Up
2 Topics
Course Roundup
Bonus: More Content!
Angular Styling & Animations (for Angular 2+)
Related Angular Courses
Thank You!
Your review has been submitted successfully.