Styles in Angular?
18 |19 | Angular 2.0+ revolutionizes the way that we architect CSS. But before we become Angular styling ninjas we need to take a step back and look at all the different ways that things can be done. In this course we explore how the framework aligns with web components and what that means for adding styles to components and apps in general. It will provide a strong knowledge of how Angular processes CSS and the many different ways it can be leveraged as part of an overall design system for creating beautiful, organized, maintainable, and future proof applications. 20 |
21 |22 | This course compliments Deborah Kurata’s Angular 2: “Getting Started” course. She briefly mentions Angular 2 components and styling and this course picks up where she leaves off with a deep dive into all that can be done with styles in Angular 2.0+. Also, it covers CSS/SCSS strategies that developers can implement to build clean, organized, and easy to maintain applications in the framework. 23 |
24 | 25 |
26 | Styling Angular Applications
30 |
47 | A dive into how styles work in Angular 2.0+. We cover how the different view encapsulation modes work, what they mean as far as the compiled code and scope, and why we may want to use each of them. We then move into the different ways that we can add styles to components, how Angular handles them, and how their priority flows through. After a complete exploration of styles in Angular we will move on to how Shadow DOM emulation is done, the CSS selectors that are emulated, what they look like when rendered in the browser, and how/why we would want to use them. 48 |
49 |52 | Focus primarily on the default “Emulated” View Encapsulation mode for Angular components. We cover concepts regarding how global styles, variables, and mixins can be handled. We look at implementing systems for CSS selectors and naming conventions. We then create a system that will allow us to apply relative units with predictability. We explore creating well-organized and structured files and address the selectors we use as well as issues regarding style overrides. We explore ideas around code, file, and directory structure and organization. And finally, we leverage the ever polular SASS preprocessor to create relationships between the styles within individual components or across multiple components making them easier to edit and maintain over time. 53 |
54 |57 | Focus on creating components that have multiple themes and we explore some different ways that we can apply them. First we explicitly set the theme per instance by adding classes and properties to components and we explore what that this SCSS/CSS would look like. We then look at providing context aware themes for components that will automatically change styles based on their surroundings using the Host Context pseudo class. We then look at ways to provide inputs as properties then adding logic to check the classes added to apply the proper theme. We also explore explore ways to conditionally alter the markup of component templates when needed. And finally, we look at the future of component theming by taking a completely different approach using CSS Custom Properties. 58 |
59 |Modules
66 |69 | In this module we begin by discussing some of the problems with CSS and traditional web apps. We then move on to a brief discussion on web components. We explore how they attempt to solve some of these issues but, as we'll discover, thier features are lacking in browser support. This leads us into a brief introduction to Angular 2.0+ and how it currently bridges the gap allowing us to leverage many of the concepts of web components now. We explore how this new way of building requires us to completely revamp our thought process when it comes to CSS/SCSS styling and architecture. 70 |
71 |74 | In this module we dive into how styles work in Angular 2.0+. We cover how the different view encapsulation modes work, what they mean as far as the compiled code and scope, and why we may want to use each of them. We then move into the different ways that we can add styles to components how Angular handles them, and how their priority flows through. After a complete exploration of styles in Angular we will move on to how Shadow DOM emulation is done, the CSS selectors that are emulated, what they look like when rendered in the browser, and how/why we would want to use them. 75 |
76 |79 | In this module we focus primarily on the default “Emulated” View Encapsulation mode for Angular components. We cover concepts regarding how global styles, variables, and mixins can be handled. We look at implementing systems for CSS selectors and naming conventions. We then create a system that will allow us to apply relative units with predictability. We explore creating well-organized and structured files and address the selectors we use as well as issues regarding style overrides. We explore ideas around code, file, and directory structure and organization. And finally, we leverage the ever polular SASS preprocessor to create relationships between the styles within individual components or across multiple components making them easier to edit and maintain over time. 80 |
81 |84 | In this module we focus on creating components that have multiple themes and we explore some different ways that we can apply them. First we explicitly set the theme per instance by adding classes and properties to components and we explore what that this SCSS/CSS would look like. We then look at providing context aware themes for components that will automatically change styles based on their surroundings using the Host Context pseudo class. We then look at ways to provide inputs as properties then adding logic to check the classes added to apply the proper theme. We also explore explore ways to conditionally alter the markup of component templates when needed. And finally, we look at the future of component theming by taking a completely different approach using CSS Custom Properties. 85 |
86 |89 | In this module we wrap everything up and recap at a high level the core concepts and takeaways from the course so that you can get on your merry way armed and ready to style any Angular application! 90 |
91 |Prerequisites
95 |
97 | This course assumes an understanding of
98 |
8 | 
23 |