Angular Styling & Animations (for Angular 2+)
4.7 (1,018 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,895 students enrolled

Angular Styling & Animations (for Angular 2+)

For Angular 2/ Angular 5: Learn how to use dynamic Styles and powerful Animations to create beautiful Angular Apps
4.7 (1,018 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
8,895 students enrolled
Last updated 2/2019
English [Auto-generated], Indonesian [Auto-generated], 4 more
  • Italian [Auto-generated]
  • Polish [Auto-generated]
  • Romanian [Auto-generated]
  • Thai [Auto-generated]
Current price: $11.99 Original price: $119.99 Discount: 90% off
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 8 articles
  • 36 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 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

Course content
Expand all 123 lectures 07:07:36
+ Getting Started
6 lectures 22:09

Let me introduce you to this course, explain what you can expect from the course and explore the covered topics.

Preview 02:12

This course might not be for everyone - in this lecture, I'll explain the prerequisites of it.

Preview 02:55

Let's get started. Whilst you might of course use any setup of your choice, I recommend using the CLI. Learn how to get started with it in this lecture.

Preview 03:46

With the CLI set up and our first project created, let's build our first mini-project!

Preview 09:38

We built our first project but what else does this course offer you? Learn more in this lecture.

Preview 01:48

You now know what the course offers you, let's now explore how you may get the most out of it.

Preview 01:50
+ Styling Angular Apps Dynamically
35 lectures 01:47:21

Time to dive into styling and learn which features Angular offers you regarding this. Let me introduce you to this course module.

Preview 01:21

Most web apps of course have a general theme, some application-wide styles. There are different ways of adding such application-wide styles in Angular apps - let me introduce you to the available options in this lecture.

Adding Application-wide Styles

Time to practice the things we learned about application-wide styles and start adding some to our application.

Let's Practice Application-wide Styles

Often times you also want to use some third-party CSS framework like Bootstrap. It's super easy to do so as this lecture will show.

Adding CSS Frameworks or External Styles to Your App

When using the CLI, there's a super easy way of adding global styles. Learn more about it in this lecture.

How to Add Global Styles in a CLI Project

When using the CLI, you're already using NPM to manage your dependencies. Chances are high that you do so even if you're not using the CLI.

This lecture will explain how you may use NPM to install CSS frameworks.

How to use NPM to install CSS Frameworks

We learned a lot about application-wide styles - time to have a closer look at components. As a key feature of Angular, it's extremely important to understand how to style them.

Understanding Component-scoped Styles

We learned how component styling works in theory, time to apply that knowledge in practice now.

Using Component-Scoped Styles

We learned how to use an external style file for component styling. Nothing wrong about that but let's also have a look at inline styles.

Using Inline Styles in Components

You may also use <style> tags in your component templates - not necessarily the approach you should take but certainly possible.

Using <style> Tags in Component Templates

View Encapsulation is a key concept of Angular and it's extremely important to understand what it is and how it works. This lecture explores this topic.

The Theory Behind Angular's View Encapsulation

We learned about Angular's View Encapsulation, time to also dive into the native Shadow DOM now.

How Angular Emulates the Shadow DOM

Are you stuck to the default View Encapsulation Mode Angular sets up? No! This lecture explores your options.

Changing the View Encapsulation Behavior

Let's use the native Shadow DOM and find out how that works and how useful it is.

Using the Native Shadow DOM

You may also turn off Angular's View Encapsulation Mechanism entirely. This lecture explains how and when to do this.

How to Turn Off View Encapsulation

When styling components, the default CSS selectors might not allow you to do everything you want to do. Let's have a look at some special selectors we may use.

Special CSS Selectors: :host

There's another way of using the :host selector. Let's take a closer look at it in this lecture.

Using the Function Form of :host

With :host, you can style components from inside - but of course you can also style them from outside as this lecture shows.

Styling Components by Using their Selector

:host is a useful selector but might still not give you all the options you need. Let's therefore explore another special CSS selector.

Special CSS Selectors: :host-context

This lecture takes a look at the last special CSS selector => /deep/

Special CSS Selectors: /deep/

We learned a lot about "static" styling thus far. Time to dive into the "dynamic" styling features Angular offers us.

Understanding ngClass Syntax

We had a look at the ngClass syntax, time to use it and see how we may use it to dynamically add CSS classes.

Using ngClass to Add CSS Classes Dynamically

You're not limited to dynamically adding CSS classes - learn how to do the same for styles in this lecture.

Understanding ngStyle Syntax

Let's use our newly gained knowledge about ngStyle and style some elements dynamically!

Using ngStyle to Dynamically Adjust CSS Styles
ngStyle: camelCase vs 'real-name'

Besides ngClass and ngStyle, there's another tool offered by Angular which you may use to change styling at runtime. Let's take a closer look at the Renderer.

Using the Angular Renderer to Adjust CSS Styles

Let's see the things we learned thus far being applied to a real project. This lecture introduces you to the project and outlines the next steps.

Project: Introduction to the Course Project

A nice way of quickly enhancing the styling: Let's add a third-party CSS framework to the project!

Project: Adding Bootstrap Styling (CSS Framework)

Let's move on and plan the next steps for the project.

Project: Planning the Next Steps

It would be nice to not have the content sit directly on top of our screen. Let's add a (component-scoped) margin to it.

Project: Adding Margin (Component-scoped)

We got a list of projects in our course project (how meta!) - let's style these items!

Project: Styling Items in A List

Would be nice to get some feedback once we marked an item - time to add such a functionality in this lecture.

Project: Dynamically Mark Items

Here's a challenge for you: Make the project status change the styling!

Project: Challenge - Style Status Changes

Let's adjust the labels of our individual projects together in this lecture.

Project: Let's Style Status Labels

Let's finish the first part of our project by styling the whole list item dependent of its project's status.

Project: Styling Inactive Items & Finishing Touches
+ Moving Things with CSS Animations
13 lectures 34:53

Let me introduce you to this course module and outline what you can expect from it.

Module Introduction

CSS Transitions are a very useful tool - this lecture explores the CSS Transition property.

Understanding the CSS Transition Property

We learned what the CSS Transition property is and how we may use it - time to use it in this lecture.

Using the Transition Property to Add Transitions

Want to learn more about the CSS Transition property? Have a look at this article and the link you can find in there.

More About the CSS Transition Property & Timing Functions

You're not limited to using one transition - this lecture explains how you may use multiple ones together.

Configuring Multiple Transitions

There's another nice feature CSS offers: Animations. Learn more about them in this lecture.

Understanding the CSS Animation Property

Want to dive deeper into the Animation property? This article (and the link you can find in there) is for you!

More About the CSS Animation Property

Let's use the animation property and see how it works.

Using the Animation Property to Add Animations

Again, time to practice the things we learned in a real project.

Project: Your Challenge!

Let's practice CSS Animations by adding a nice little loading bar to our application!

Project: Implementing an Animated Loading Bar

We want to make highlighting projects more fun - let's start by smoothly transitioning the border color.

Project: Transitioning Border Colors

We can do better! Let's also use CSS Animations to animate the selection of a project in our course project.

Project: Animating the Selection ("marked") of List Items

When should you use CSS Transitions, CSS Animations and Angular Animations? This lecture helps!

Transitions vs Animations vs Angular Animations
+ Diving into the Angular Animation Package
28 lectures 01:29:36

Do you want to use Angular 2 instead of Angular 4? Check out this lecture?

Want to use Angular 2 instead of Angular 4?

Time to dive into the Angular Animation Package - let me introduce you to this module first though.

Module Introduction

It's super important to understand how Angular Animations work and which elements you're going to learn over the next lectures.

How Animations work in Angular

Angular Animations don't work out of the box in all browser - but no worries, it's easy to make them work.

Browser Support & Polyfills

Before we can use Animations, we have to add the right module to our project. Nothing easier than that, this lecture shows how to do it.

Unlocking Animations with the Right Module

Let's get started with building animations and the first important features: Triggers and States

Getting Started with Triggers and States

So how do you know which CSS properties you may animate? This article (and link) should be helpful.

Which Properties are Animatable?

Having a trigger is nice but using it is even better - so let's do that in our template now.

Assigning Triggers to Elements in the Template

Right now, we're using a hard-coded value for our trigger state. Not that useful to be honest. Learn how to set a dynamic one in this lecture.

Switching Trigger States Dynamically

We're able to switch between states. That's great but doesn't have that much to do with animations. Time for our first transition then!

Adding Transitions between States

What's better than one transition? Multiple transitions!

Using Multiple Transitions

With the basics set, it's time to build more complex triggers with more than two states. This lecture dives into this topic.

Build more Complex Triggers with More States

How to deal with more than two states? Well, with more transitions! See how to do it elegantly in this lecture.

Configuring Elegant Transitions When Using Many States

You may use a trigger on multiple elements - did you know that? Well, you will after this lecture.

Understand the Re-Usability of Triggers

Multiple states, multiple transitions - what's missing? Multiple triggers! Let's create additional ones!

Using Multiple Triggers

Thus far, we used rather simple transitions. Often times, you need more power. You can get more power with multi-step transitions!

Creating Multi-Step Transitions

What if your transition should contain a style which is not part of your starting or ending state? Then you should use a temporary style in-between!

Multi-Step Transitions and Temporary Styles

Here's a fix for a little bug you might encounter when using Angular 4.

A Bug in Angular 4 Animations

Here's an important note on how to style your states and animations correctly.

Styling States and Animations Correctly

You learned a lot about Angular's Animation System. But when should you use it? When should you use normal CSS animations? This lecture answers the question.

CSS Animations vs Angular Animations

The animations array in the component decorator is growing quickly. Time to think about outsourcing it.

Outsourcing Animations

Let's apply the newly gained knowledge to our course project - here's your challenge!

Project: Your Challenge!

Let's start by setting up animations for the project.

Project: Setting Up Animations

Let's build the first animation - starting with triggers and states.

Project: Adding Triggers and States

Triggers and states alone won't do much - time for some transitions!

Project: Adding Transitions

We can do better than boring transitions. Time for multi-step transitions!

Project: Using Multi-Step Transitions

Now, with our Animations in place, we can clean up some of our old CSS code. Let's do so.

Project: Cleaning Up Some CSS

Let's polish our animations with some temporary styles.

Project: Using Temporary Styles in Transitions
+ Becoming an Angular Animations Pro
24 lectures 01:53:07

Let me introduce you to this module.

Module Introduction

There are some animations we just can't create as of now - let's quickly see which that are.

Animations We Can't Create As Of Now

Angular's Animation package ships with a nice built-in state we may use: The void state. Lern more about it in this lecture.

Using the "void" State in Transitions

There's another useful built-in state we may use: The Wildcard (*) state. Let's dive into this one in this lecture.

Using the "*" Wildcard State in Transitions

What if you want to animate some dimensional property (e.g. width) but don't know the current width? This lecture shows how Angular helps you.

Using Dynamic Dimensionial Properties

We learned how we may animate the addition and removal of an element to/from the DOM. This now also allows us to animate lists as this lecture shows.

Animating Lists

Sometimes, you don't want to run animation steps sequentially but simultaneously - no problem with Animation Groups!

Using Animation Groups for Parallel Animations

From time to time we used some timing functions in this course - ease-in etc. This lecture takes a closer look at these functions and explains how to use them and how they work.

Understanding Timing Functions (ease-in etc)

You feel like you still don't have enough control over you animation? Well, look no further - Keyframes are there to help you!

Control Everything with Animation Keyframes

Do you know when to use what? This lecture explains the differences!

Multi-Step Transitions vs Animation Groups vs Keyframes

Angular allows you to react to certain Animation Events. This lecture explores which events that are and how it works.

Reacting to Animation Events

Let me quickly give you a first summary over this section.

A First Summary

Time to use the things we learned on our project - here are the next steps and your challenge!

Project: Next Steps & Your Challenge

We got a list in our project and we learned how animate lists. Let's use that knowledge now!

Project: Adding a Basic List Animation

Let's improve our list animation with keyframes.

Project: Creating a Better List Animation with Keyframes

Everyone loves them: Staggered Lists! Learn how to create one in this lecture!

Project: Creating a Staggered List

Let's move things around if we try to create a new project.

Project: Sliding Things Around

Time to also slide some list items around.

Project: Sliding List Items Around

We got some nasty glitches in our app - let's fix them by synchronizing our animations.

Project: Synchronizing Animations

Let's go back from item-sliding to normal state-switching and let's animate a button, depending on the state of our "New Project" form.

Project: Animating a Button depending on Form Validity

A lot of useful things were covered in this course but there's one thing we haven't considered yet: How you may animate routing. Time to take a closer look now.

How to Animate Routing

Now that we understood how route animations work, let's build a simple one in this lecture.

Project: Creating a Basic Route Animation (Fade-in-out)

Time to get more fancy - let's build a more complex route animation in this lecture.

Project: Getting Fancy: A Slide-down Route Animation

We did it! We really improved this project a lot - time for a wrap up.

Project Wrap Up
+ New Animation Features with Angular 4.2
15 lectures 58:49

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction

Probably the most important addition with Angular 4.2: query(). Learn what it's about in this lecture!

Using the new query() Method

We had a look at the basics, let's now dive deeper into query!

More on query()

When using query(), you got access to some special selectors. Learn more about them in this lecture.

Special Selectors for query()

Want to know everything about query? This lecture is for you!

All Special Selectors & Full query() Docs

When using query(), you can configure some options. This lectures explores which these are.

query() Options

You're not limited to one selector at a time - this lectures explains how you may combine multiple selectors.

Combining query() Selectors

We have query() and we have a course project. Why don't we combine both?

Adding Query to the Course Project

We added a small bug to our course project. Let's fix it!

Fixing a Small Bug with query() and the Course Project

We already have a staggering animation in our project but we had to use some workarounds to make it work. This lectures shows an easier way.

Easy Staggering Animations with stagger()

The creation of re-usable animations became easier with Angular 4.2. Learn how it works in this lecture.

Creating Re-Usable Animations

What if you wanted to create and run an animation at runtime? That's now possible, too. Learn how it works in this lecture.

Creating and Running Animations Programmatically

Animating route transitions became easier! Learn more about it in this lecture.

Improved Route Animations

Unfortunately, there still is an issue with route animations as of now. Let me share which one this is.

An Issue with Route Animations

Let me wrap this module up and summarize for you.

Wrap Up
+ Course Roundup
2 lectures 01:55

Let me round this course up.

Course Roundup
Bonus: More Content!
  • Basic Angular (2 or 4) knowledge is required
  • Basic CSS knowledge is required
  • Basic CSS Transitions & Animations knowledge is a plus
  • No Angular Animations knowledge is required

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!

Who this course is for:
  • This course is for everyone interested in enhancing the user experience by adding nice styles and animations with the help of Angular
  • Students who are interested in dynamically styling or animating Angular apps should find this course very helpful