Angular Styling & Animations (for Angular 2+)
For Angular 2+: Learn how to use dynamic styles and powerful animations to create beautiful Angular apps
Enroll in 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!
7+
hours
120+
lessons
Course Curriculum
-
PreviewIntroduction (2:12)
-
PreviewUnderstanding the Prerequisites (2:55)
-
PreviewJoin our Online Learning Community
-
PreviewCreating a Project (Course Setup) (3:46)
-
PreviewOur First Project (9:38)
-
PreviewThe Structure of This Course (1:48)
-
PreviewHow to get the Most out of this Course (1:50)
-
StartThe Academind Pro Referral Program
-
StartModule Introduction (1:21)
-
StartAdding Application-wide Styles (1:57)
-
StartLet's Practice Application-wide Styles (5:50)
-
StartAdding CSS Frameworks or External Styles to Your App (4:30)
-
StartHow to Add Global Styles in a CLI Project (2:58)
-
StartHow to use NPM to install CSS Frameworks (3:11)
-
StartUnderstanding Component-scoped Styles (1:09)
-
StartUsing Component-Scoped Styles (3:01)
-
StartUsing Inline Styles in Components (1:41)
-
StartUsing Tags in Component Templates (2:11)
-
StartThe Theory Behind Angular's View Encapsulation (6:12)
-
StartHow Angular Emulates the Shadow DOM (3:03)
-
StartChanging the View Encapsulation Behavior (1:57)
-
StartUsing the Native Shadow DOM (3:25)
-
StartHow to Turn Off View Encapsulation (1:49)
-
StartSpecial CSS Selectors: :host (3:53)
-
StartUsing the Function Form of :host (1:46)
-
StartStyling Components by Using their Selector (2:09)
-
StartSpecial CSS Selectors: :host-context (4:36)
-
StartSpecial CSS Selectors: /deep/ (3:58)
-
StartUnderstanding ngClass Syntax (2:02)
-
StartUsing ngClass to Add CSS Classes Dynamically (3:42)
-
StartUnderstanding ngStyle Syntax (2:00)
-
StartUsing ngStyle to Dynamically Adjust CSS Styles (2:40)
-
StartngStyle: camelCase vs 'real-name'
-
StartUsing the Angular Renderer to Adjust CSS Styles (7:04)
-
StartProject: Introduction to the Course Project (3:35)
-
StartProject: Adding Bootstrap Styling (CSS Framework) (2:54)
-
StartProject: Planning the Next Steps (2:39)
-
StartProject: Adding Margin (Component-scoped) (1:36)
-
StartProject: Styling Items in A List (4:18)
-
StartProject: Dynamically Mark Items (4:47)
-
StartProject: Challenge - Style Status Changes (1:51)
-
StartProject: Let's Style Status Labels (3:25)
-
StartProject: Styling Inactive Items & Finishing Touches (3:45)
-
StartModule Introduction (1:00)
-
StartUnderstanding the CSS Transition Property (1:44)
-
StartUsing the Transition Property to Add Transitions (3:39)
-
StartMore About the CSS Transition Property & Timing Functions
-
StartConfiguring Multiple Transitions (3:09)
-
StartUnderstanding the CSS Animation Property (2:18)
-
StartMore About the CSS Animation Property
-
StartUsing the Animation Property to Add Animations (7:15)
-
StartProject: Your Challenge! (1:30)
-
StartProject: Implementing an Animated Loading Bar (4:40)
-
StartProject: Transitioning Border Colors (1:53)
-
StartProject: Animating the Selection ("marked") of List Items (2:27)
-
StartTransitions vs Animations vs Angular Animations (4:24)
Course Prerequisites
Basic Angular knowledge is required
Basic CSS knowledge is strongly recommended
All pre-requisites are covered by courses in our "Academind Pro" Membership.
Don't take my word for it - here's what other students are saying.
Gyan
Many quesitons answered about component styling and component animation. Highly recommended course to take deep dive into blowing your application with more interactivity. Learning new things about angular animations.
Dana Harris
I really learned a lot about Angular Animations, more then I thought I would. This course will and has helped me with side projects as well as company projects.
Jordan Daake
Max delivers again. I'm fairly new to Angular and this course really helped clarify all of the ways to leverage basic and complex animations and styling. It also helped me gain a much better understanding of data-binding as well as creative ways to use ngIf.
30 Day Money Back Guarantee - No Questions Asked!
Our courses helped thousands of students learn something new and improve their lives.
We're so convinced by our course quality that we guarantee your success and provide a full refund within the first 30 days if you're not happy with the course.
Your 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 enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 2,500,000 students worldwide as well as a successful YouTube channel with 900.000 subscribers 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.
Frequently Asked Questions
Join 9823 happy students!
Single-Course License
Full access to "Angular Styling & Animations (for Angular 2+)"
$69
Access to this course only.
This is a one-time payment that grants access to this course only, not to any other courses.
Academind Pro Membership
Unlimited access to this and all other current & future courses!