W3docs
es
Iniciar sesión

Angular Styling & Animations (for Angular 2+)

For Angular 2+: Learn how to use dynamic styles and powerful animations to create beautiful Angular apps

Start course

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!

This is what the course offers - but is this course for you?

This course is for you if ...

  • ... you got (basic) Angular and CSS knowledge and feel like you need to learn more about adding/ using styles and animations in your Angular apps
  • ... you're learning Angular right now and you want to continue learning with more beautiful apps
  • ... you even already know the basics about styling and animating Angular apps but you feel like there still is some mystery regarding the styling/ animation of components

I'd be very happy to welcome you in this course!

Course content

Section 1Getting Started

  • Introduction
    2:12
  • Understanding the Prerequisites
    2:55
  • Join our Online Learning Community
    1:00
  • Creating a Project (Course Setup)
    3:46
  • Our First Project
    9:38
  • The Structure of This Course
    1:48
  • How to get the Most out of this Course
    1:50

Section 2Styling Angular Apps Dynamically

  • Module IntroductionPremium
    1:21
  • Adding Application-wide StylesPremium
    1:57
  • Let's Practice Application-wide StylesPremium
    5:50
  • Adding CSS Frameworks or External Styles to Your AppPremium
    4:30
  • How to Add Global Styles in a CLI ProjectPremium
    2:58
  • How to use NPM to install CSS FrameworksPremium
    3:11
  • Understanding Component-scoped StylesPremium
    1:09
  • Using Component-Scoped StylesPremium
    3:01
  • Using Inline Styles in ComponentsPremium
    1:41
  • Using Tags in Component TemplatesPremium
    2:11
  • The Theory Behind Angular's View EncapsulationPremium
    6:12
  • How Angular Emulates the Shadow DOMPremium
    3:03
  • Changing the View Encapsulation BehaviorPremium
    1:57
  • Using the Native Shadow DOMPremium
    3:25
  • How to Turn Off View EncapsulationPremium
    1:49
  • Special CSS Selectors: :hostPremium
    3:53
  • Using the Function Form of :hostPremium
    1:46
  • Styling Components by Using their SelectorPremium
    2:09
  • Special CSS Selectors: :host-contextPremium
    4:36
  • pecial CSS Selectors: /deep/Premium
    3:58
  • Understanding ngClass SyntaxPremium
    2:02
  • Using ngClass to Add CSS Classes DynamicallyPremium
    3:42
  • Understanding ngStyle SyntaxPremium
    2:00
  • Using ngStyle to Dynamically Adjust CSS StylesPremium
    2:40
  • ngStyle: camelCase vs 'real-name'Premium
    1:00
  • Using the Angular Renderer to Adjust CSS StylesPremium
    7:04
  • Project: Introduction to the Course ProjectPremium
    3:35
  • Project: Adding Bootstrap Styling (CSS Framework)Premium
    3:54
  • Project: Planning the Next StepsPremium
    2:39
  • Project: Adding Margin (Component-scoped)Premium
    1:36
  • Project: Styling Items in A ListPremium
    4:18
  • Project: Dynamically Mark ItemsPremium
    4:47
  • Project: Challenge - Style Status ChangesPremium
    1:51
  • Project: Let's Style Status LabelsPremium
    3:25
  • Project: Styling Inactive Items & Finishing TouchesPremium
    3:45

Section 3Moving Things with CSS Animations

  • Module IntroductionPremium
    1:00
  • Understanding the CSS Transition PropertyPremium
    1:44
  • Using the Transition Property to Add TransitionsPremium
    3:39
  • More About the CSS Transition Property & Timing FunctionsPremium
    1:00
  • Configuring Multiple TransitionsPremium
    3:09
  • Understanding the CSS Animation PropertyPremium
    2:18
  • More About the CSS Animation PropertyPremium
    1:00
  • Using the Animation Property to Add AnimationsPremium
    7:15
  • Project: Your Challenge!Premium
    1:30
  • Project: Implementing an Animated Loading BarPremium
    4:40
  • Project: Transitioning Border ColorsPremium
    1:53
  • Project: Animating the Selection ("marked") of List ItemsPremium
    2:27
  • Transitions vs Animations vs Angular AnimationsPremium
    4:24

Section 4Diving into the Angular Animation Package

  • Module IntroductionPremium
    1:08
  • How Animations work in AngularPremium
    4:05
  • Browser Support & PolyfillsPremium
    3:42
  • Unlocking Animations with the Right ModulePremium
    1:50
  • Getting Started with Triggers and StatesPremium
    7:48
  • Assigning Triggers to Elements in the TemplatePremium
    2:47
  • Switching Trigger States DynamicallyPremium
    3:45
  • Adding Transitions between StatesPremium
    5:56
  • Using Multiple TransitionsPremium
    2:03
  • Build more Complex Triggers with More StatesPremium
    3:41
  • Configuring Elegant Transitions When Using Many StatesPremium
    2:34
  • Understand the Re-Usability of TriggersPremium
    2:21
  • Using Multiple TriggersPremium
    6:41
  • Creating Multi-Step TransitionsPremium
    6:07
  • Multi-Step Transitions and Temporary StylesPremium
    3:08
  • A Possible BugPremium
    1:00
  • Styling States and Animations CorrectlyPremium
    4:36
  • CSS Animations vs Angular AnimationsPremium
    3:33
  • Outsourcing AnimationsPremium
    3:05
  • Project: Your Challenge!Premium
    2:55
  • Project: Setting Up AnimationsPremium
    1:58
  • Project: Adding Triggers and StatesPremium
    5:43
  • Project: Adding TransitionsPremium
    2:13
  • Project: Using Multi-Step TransitionsPremium
    2:22
  • Project: Cleaning Up Some CSSPremium
    2:23
  • Project: Using Temporary Styles in TransitionsPremium
    2:19

Section 5Becoming an Angular Animations Pro

  • Module IntroductionPremium
    1:24
  • Animations We Can't Create As Of NowPremium
    5:51
  • Using the "void" State in TransitionsPremium
    3:19
  • Using the "*" Wildcard State in TransitionsPremium
    3:52
  • Using Dynamic Dimensionial PropertiesPremium
    7:03
  • Animating ListsPremium
    3:51
  • Using Animation Groups for Parallel AnimationsPremium
    5:25
  • Understanding Timing Functions (ease-in etc)Premium
    6:16
  • Control Everything with Animation KeyframesPremium
    8:24
  • Multi-Step Transitions vs Animation Groups vs KeyframesPremium
    4:43
  • Reacting to Animation EventsPremium
    4:36
  • A First SummaryPremium
    0:54
  • Project: Next Steps & Your ChallengePremium
    1:45
  • Project: Adding a Basic List AnimationPremium
    5:33
  • Project: Creating a Better List Animation with KeyframesPremium
    5:16
  • Project: Creating a Staggered ListPremium
    6:14
  • Project: Sliding Things AroundPremium
    4:50
  • Project: Sliding List Items AroundPremium
    5:28
  • Project: Synchronizing AnimationsPremium
    3:27
  • Project: Animating a Button depending on Form ValidityPremium
    7:24
  • How to Animate RoutingPremium
    2:27
  • Project: Creating a Basic Route Animation (Fade-in-out)Premium
    9:32
  • Project: Getting Fancy: A Slide-down Route AnimationPremium
    4:24
  • Project Wrap UpPremium
    1:09

Section 6New Animation Features with Angular 4.2

  • Module IntroductionPremium
    2:24
  • Using the new query() MethodPremium
    6:20
  • More on query()Premium
    2:40
  • Special Selectors for query()Premium
    5:34
  • All Special Selectors & Full query() DocsPremium
    1:00
  • query() OptionsPremium
    1:44
  • Combining query() SelectorsPremium
    2:05
  • Adding Query to the Course ProjectPremium
    6:39
  • Fixing a Small Bug with query() and the Course ProjectPremium
    0:40
  • Easy Staggering Animations with stagger()Premium
    8:11
  • Creating Re-Usable AnimationsPremium
    4:23
  • Creating and Running Animations ProgrammaticallyPremium
    4:44
  • Improved Route AnimationsPremium
    10:43
  • An Issue with Route AnimationsPremium
    1:44
  • Wrap UpPremium
    0:39

Section 7Course Roundup

  • RoundupPremium
    1:29

Course instructor

Photo of Maximilian Schwarzmüller

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.