Angular Styling & Animations (for Angular 2+)

4.6 (1316)
Learning paid
7 hours course
Course by Udemy
What will you 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
About the 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!

Getting Started
Students will understand what this course offers, how it is structured and how to get the most out of it.
Let me introduce you to this course, explain what you can expect from the course and explore the covered topics.
Understanding the Prerequisites
This course might not be for everyone - in this lecture, I'll explain the prerequisites of it.
Creating a Project (Course Setup)
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.
Our First Project
With the CLI set up and our first project created, let's build our first mini-project!
The Structure of This Course
We built our first project but what else does this course offer you? Learn more in this lecture.
How to get the Most out of this Course
You now know what the course offers you, let's now explore how you may get the most out of it.
Styling Angular Apps Dynamically
Students will understand which tools Angular offers to style Angular apps and to dynamically adjust that styling.
Module Introduction
Time to dive into styling and learn which features Angular offers you regarding this. Let me introduce you to this course module.
Adding Application-wide Styles
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.
Let's Practice Application-wide Styles
Time to practice the things we learned about application-wide styles and start adding some to our application.
Adding CSS Frameworks or External Styles to Your App
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.
  • 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
Maximilian Schwarzmüller
Maximilian Schwarzmüller
Professional Web Developer and Instructor
Udemy courses are suited to professional development. The platform is organized in such a way that it is experts themselves that decide the topic and when the course will start. All supporting documents are made available to you for lifetime access. On this platform, you can find a course on about any subject, and that is no exaggeration – from a tutorial on how to ride a motorcycle, to managing the financial markets. The language and the course format are established by the teacher. This is why it is important to read the information about the course carefully before parting with any money.
Comments (1316)
Like any other website, konevy uses «cookies». These cookies are used to store information including visitor's preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information. For more general information on cookies, please read the «What Are Cookies» article on Cookie Consent website.