This post walks through a series of videos focused on more advanced Angular subjects—the kind of topics that surface regularly, particularly when developing your own third-party libraries.
Table Of Contents
Below is a list of the topics featured in the videos included in this post. Each topic has an associated video and a brief description. All videos are part of this Playlist:
- Video 1: Angular Component Styling — See Style Isolation In Action And Understand Its Mechanics
- Video 2: Component API Design and ng-content
- Video 3: Angular CSS Extension Feature — The Host Pseudo Selector
- Video 4: Angular Component Testing — Building A Readable, Maintainable Test Suite
- Video 5: Debugging Angular Tests — A Step-by-Step Troubleshooting Example
- Video 6: The Angular Host Context CSS Selector With CLI Sass Integration
- Video 7: Demo Of The Font Awesome And Google Material Icons Input Box Library
- Video 8: Structural Directives — Syntax And How They Work
Video 1 - Angular Component Styling - A Look At Style Isolation And Its Mechanism
Style isolation is a recurring concern when building third-party libraries. In day-to-day application development, plain CSS is usually sufficient, especially when relying on a library like Bootstrap.
However, when we distribute components for use in other applications, isolating certain styles makes those components more reusable and easier to integrate.
Structural styles—such as how internal elements are laid out relative to each other—are particularly good candidates for isolation.
To see how Angular's style mechanism works, check out the video below:
Video 2 - Component API Design and ng-content
Component API design is another frequent consideration. It can be tempting to add @Inputs and @Outputs to every component, and that is sometimes the right call.
But in many cases, components become more flexible and easier to maintain when they are made configurable through Template Partials.
Content projection is one way to let a component accept an HTML block as input. Watch the following video to learn more about content projection and how it can improve component APIs:
Video 3 - The Host Pseudo Selector - An Angular CSS Extension
Video 1 demonstrated style isolation inside the template. That feature is useful, but there are times when a style needs to be applied to the host element itself.
To address this, Angular provides a set of CSS extension pseudo-selectors. This video covers the host pseudo selector:
Video 4 - Angular Component Testing - Structuring A Readable And Maintainable Test Suite
Angular CLI has made writing tests much easier. For testing the view layer, an integration test is necessary because testing component functionality typically requires a DOM.
This video shows what a component test suite can look like and covers common practices for organizing tests in a way that keeps them easy to maintain.
The aim is simple: when a test fails, the test report should give a clear indication of what functionality is broken, without requiring a debugging session to understand the failure.
Debugging might still be needed to fix the issue, but the report alone should be enough to identify the problem area. The test suite built in this video demonstrates this approach:
Video 5 - Debugging Angular Tests - Step-by-Step Troubleshooting Of A Failing Test
Even with a well-structured test suite, failing tests can require additional debugging techniques. This can happen if the setup phase of the suite fails, or more commonly, when writing a test from scratch that has no specs defined yet.
For a walkthrough of debugging an integration test running in a headless browser, watch this video:
Video 6 - The Angular Host Context CSS Selector And CLI Sass Integration
One advantage of Angular's style isolation is that it generally leads to simpler, more readable CSS. This is largely because there is less need for high-specificity selectors.
Angular's style isolation mechanism transparently increases the specificity of component styles and constrains them to elements within the component template.
There are occasions, however, where styling elements outside the component is desirable—for example, for theming. The host-context pseudo-selector supports these use cases and is the subject of this video:
Video 7 - Demo Of The Font Awesome And Google Material Icons Input Box Library
This video demonstrates a small component built with content projection: an input box with an icon that indicates the field's purpose, such as an envelope icon for an email field.
In this component, the HTML input is passed in as an input rather than being hard-coded in the template. This approach avoids several design pitfalls.
Notably, it eliminates the need to forward properties and events from the component to the underlying HTML input. The video shows what such a design looks like:
Video 8 - Structural Directives - Syntax And How They Work
This video covers a use case that is well suited for a custom structural directive. It includes a discussion of library design and explains how the syntax of directives like *ngFor and *ngIf is desugared by Angular:
Summary
I hope you found this collection of videos useful. The topics covered here frequently come up, particularly when designing third-party libraries:
- isolating component styles
- designing component APIs
- writing maintainable tests
- using more advanced features like custom structural directives
To stay updated on future posts, consider subscribing to our newsletter. The subscription includes Angular News, PDFs on various Angular topics, and videos like those above:
If you're just starting out with Angular, take a look at the Angular for Beginners Course:
Other posts on Angular
Here are other popular posts that you might find interesting:
- Getting Started With Angular - Development Environment Best Practices With Yarn, the Angular CLI, Setup an IDE
- Why a Single Page Application, What are the Benefits ? What is a SPA ?
- Angular Smart Components vs Presentation Components: What's the Difference, When to Use Each and Why?
- Angular Router - How To Build a Navigation Menu with Bootstrap 4 and Nested Routes
- Angular Router - Extended Guided Tour, Avoid Common Pitfalls
- Angular Components - The Fundamentals
- How to build Angular apps using Observable Data Services - Pitfalls to avoid
- Introduction to Angular Forms - Template Driven vs Model Driven
- Angular ngFor - Learn all Features including trackBy, why is it not only for Arrays ?
- Angular Universal In Practice - How to build SEO Friendly Single Page Apps with Angular
- How does Angular Change Detection Really Work ?