Angular Styling & Animations (for Angular 2 and Angular 4)
4.8 (404 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
4,706 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular Styling & Animations (for Angular 2 and Angular 4) to your Wishlist.

Add to Wishlist

Angular Styling & Animations (for Angular 2 and Angular 4)

For Angular 2/ Angular 4: Learn how to use dynamic Styles and powerful Animations to create beautiful Angular Apps
4.8 (404 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
4,706 students enrolled
Last updated 7/2017
English
English
Curiosity Sale
Current price: $10 Original price: $120 Discount: 92% off
30-Day Money-Back Guarantee
Includes:
  • 7 hours on-demand video
  • 7 Articles
  • 36 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
Requirements
  • 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
Description

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 is the target audience?
  • 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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
122 Lectures
07:07:16
+
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:22

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
01:57

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

Let's Practice Application-wide Styles
05:50

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
04:30

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
02:58

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
03:11

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
01:09

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

Using Component-Scoped Styles
03:01

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
01:41

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
02:11

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
06:12

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

How Angular Emulates the Shadow DOM
03:03

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

Changing the View Encapsulation Behavior
01:57

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

Using the Native Shadow DOM
03:25

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
01:49

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
03:53

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
01:46

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
02:09

: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
04:36

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

Special CSS Selectors: /deep/
03:58

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

Understanding ngClass Syntax
02:02

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
03:42

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

Understanding ngStyle Syntax
02:00

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

Using ngStyle to Dynamically Adjust CSS Styles
02:40

ngStyle: camelCase vs 'real-name'
00:26

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
07:04

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
03:35

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)
02:54

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

Project: Planning the Next Steps
02:39

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)
01:37

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

Project: Styling Items in A List
04:18

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
04:47

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

Project: Challenge - Style Status Changes
01:51

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

Project: Let's Style Status Labels
03:25

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
03:45
+
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
01:00

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

Understanding the CSS Transition Property
01:45

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
03:40

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
00:40

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

Configuring Multiple Transitions
03:09

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

Understanding the CSS Animation Property
02:18

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
00:12

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

Using the Animation Property to Add Animations
07:15

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

Project: Your Challenge!
01:30

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

Project: Implementing an Animated Loading Bar
04:40

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

Project: Transitioning Border Colors
01:53

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
02:27

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

Transitions vs Animations vs Angular Animations
04:24
+
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?
00:21

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

Module Introduction
01:08

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
04:05

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
03:42

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
01:50

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

Getting Started with Triggers and States
07:48

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

Which Properties are Animatable?
00:06

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
02:47

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
03:45

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
05:56

What's better than one transition? Multiple transitions!

Using Multiple Transitions
02:03

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
03:41

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
02:34

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

Understand the Re-Usability of Triggers
02:21

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

Using Multiple Triggers
06:41

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
06:07

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
03:08

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

A Bug in Angular 4 Animations
00:24

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

Styling States and Animations Correctly
04:36

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
03:33

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

Outsourcing Animations
03:05

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

Project: Your Challenge!
02:55

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

Project: Setting Up Animations
01:58

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

Project: Adding Triggers and States
05:43

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

Project: Adding Transitions
02:14

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

Project: Using Multi-Step Transitions
02:22

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
02:23

Let's polish our animations with some temporary styles.

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

Let me introduce you to this module.

Module Introduction
01:24

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
05:51

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
03:19

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
03:52

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
07:03

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
03:51

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

Using Animation Groups for Parallel Animations
05:25

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)
06:16

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
08:24

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

Multi-Step Transitions vs Animation Groups vs Keyframes
04:43

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

Reacting to Animation Events
04:36

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

A First Summary
00:54

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

Project: Next Steps & Your Challenge
01:45

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
05:33

Let's improve our list animation with keyframes.

Project: Creating a Better List Animation with Keyframes
05:16

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

Project: Creating a Staggered List
06:14

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

Project: Sliding Things Around
04:50

Time to also slide some list items around.

Project: Sliding List Items Around
05:28

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

Project: Synchronizing Animations
03:27

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
07:24

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
02:27

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)
09:32

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

Project: Getting Fancy: A Slide-down Route Animation
04:24

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

Project Wrap Up
01:09
+
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
02:24

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

Using the new query() Method
06:20

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

More on query()
02:40

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

Special Selectors for query()
05:34

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

All Special Selectors & Full query() Docs
00:18

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

query() Options
01:44

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

Combining query() Selectors
02:05

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

Adding Query to the Course Project
06:39

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

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

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()
08:11

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

Creating Re-Usable Animations
04:23

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
04:44

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

Improved Route Animations
10:43

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

An Issue with Route Animations
01:45

Let me wrap this module up and summarize for you.

Wrap Up
00:39
+
Course Roundup
1 Lecture 01:29

Let me round this course up.

Course Roundup
01:29
About the Instructor
Maximilian Schwarzmüller
4.7 Average rating
43,034 Reviews
132,381 Students
15 Courses
Professional Web Developer and Instructor

Experience as Web Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS) I also became more and more of a frontend developer using modern frameworks like Angular or VueJS 2 in a lot of projects. I love both worlds nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

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 enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 100.000 students on Udemy as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.