Angular Styling & Animations (for Angular 2+)

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

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.

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

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.

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

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.

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.

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

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.

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

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.

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

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

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

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

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.

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

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

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

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

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

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

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

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

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.

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.

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

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

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.

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

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

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

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

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

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

CSS Transitions are a very useful tool - this lecture explores 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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.

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!

What's better than one transition? 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.

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

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

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

Thus far, we used rather simple transitions. Often times, you need more power. You can get more power with 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!

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

Here's an important note on how to style your 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.

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

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

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

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

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

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

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

Let's polish our animations with some temporary styles.

Let me introduce you to this module.

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

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

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

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.

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.

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

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.

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

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

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

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

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

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

Let's improve our list animation with keyframes.

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

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

Time to also slide some list items around.

We got some nasty glitches in our app - let's fix them by synchronizing our 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.

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.

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

Let me wrap this module up and summarize for you.

Let me round this course up.