In this post, we are going to go over a few videos on some more advanced Angular topics that we tend to find frequently - for example when writing our own third-party library.

Table Of Contents

Here is the list of topics covered in the videos available in this post, each of these topics has a video associated with it plus a description, all videos are part of this Playlist:

  • Video 1: Angular Component Styling - Watch Component Style Isolation In Action, Learn How It Works
  • Video 2: Component API Design and ng-content
  • Video 3: Learn An Angular CSS Extension Feature - The Host Pseudo Selector
  • Video 4: Angular Component Testing - How to Write A More Readable and Maintainable Angular Test Suite
  • Video 5: How To Debug Angular Tests - A Step-by-Step Example of How To Troubleshoot a Failing Test
  • Video 6: Learn The Angular Host Context CSS Selector, See the CLI SAAS integration In Action
  • Video 7: Demo of The Font Awesome And Google Material Icons Input Box Library
  • Video 8: Structural Directives - How Do They Work? Understanding Their Syntax

Video 1 - Angular Component Styling - Watch Component Style Isolation In Action, Learn How It Works

One of the topics that we will come across while designing third-party libraries is style isolation. Very often while developing applications we tend to use plain CSS, which works great especially if we are using a third party library like Bootstrap.

But if we want to ship components to other applications, we can make our components much more reusable and easy to deploy if we isolate some of the styles of the component.

For example, the more structural styles of the component such as the way the component internal elements are positioned internally: those are great candidates for style isolation.

To learn how the Angular style mechanism works, have a look at this video:

Video 2 - Component API Design and ng-content

Another topic that we will run into frequently while designing Angular Components is Component API design. We might be tempted to systematically adds @Inputs and @Outputs to all our components, which depending on the case might be the best choice.

But may times we could instead make them much more customizable and simple to maintain if we make the components configurable via Template Partials.

One way of allowing a component to take as input an HTML block is to use content projection. To learn more about content projection and they way that it helps us improve the APIs of our components, have a look at this video:

Video 3 - Learn An Angular CSS Extension Feature - The Host Pseudo Selector

In Video 1 we saw the Angular component styling isolation mechanism in action, which isolates certain styles inside the template. This is a great feature, but the problem is that sometimes we want to add a style to the host element itself.

For that, we have available a series of CSS extensions pseudo-selectors, and one of them is host pseudo selector that we will cover in this video:

Video 4 - Angular Component Testing - How to Write A More Readable and Maintainable Angular Test Suite

With the Angular CLI, writing tests in Angular is now simpler than ever. And if we are testing the view layer, we are going to need an integration test. This is because for being able to test a large part of a component functionality we will be needing a DOM.

This video shows what an Angular Test suite for a component could look like, and also shows some common practices for structuring our tests so that they are simple to maintain.

The goal is that if a test fails, we should be able to have a fairly good idea of what functionality is broken just by looking at the test report, without needing to debug the test.

We might need to debug the problem in order to fix, but not to have a clear picture of what went wrong. To see how we can structure our tests in such a way, have a look at the test suite built in this video:

Video 5 - How To Debug Angular Tests - A Step-by-Step Example of How To Troubleshoot a Failing Test

If a test fails, we might still need some debugging techniques to do some further troubleshooting. This might be the case if the test suite fails at its very early stages of setup, but the most common case is when we are first writing the test, and don't have yet any specs in place.

To see one way of debugging an integration test that is running in a headless browser scenario, have a look at this video for an example:

Video 6 - Learn The Angular Host Context CSS Selector, See the CLI SAAS integration In Action

One of the benefits of using the Angular style isolation mechanism is that in the end, we tend to have simpler and more readable CSS. And this is mostly because we don't need as many higher-specificity styles as before.

This is because the Angular style isolation mechanism will transparently both increase the specificity of our component styles plus it will ensure that are constrained to only elements that are part of the component template.

But there are still occasions where we would like to style elements outside the component, for example for theming purposes. To support those use cases, we have available the host-context pseudo-selector which is covered in this video:

Video 7 - Demo of The Font Awesome And Google Material Icons Input Box Library

This video is a demo of a small component built using content projection. This is an input box with an icon that helps to identify the text field, such as for example an envelope icon that helps identify the email field.

In this component, we have prevented several design issues by choosing to take the HTML input box as an input, instead of making it part of the template directly.

This prevents having to forward properties and events from the component inputs and outputs to the plain HTML Input. Have a look at this video to see what a component with this type of design would look like:

Video 8 - Structural Directives - How Do They Work? Understanding Their Syntax

In this video, we are going to show a use case that is is well suited for being implemented as a custom structural directive. This video contains a library design discussion and also it covers how the syntax for structural directives such as *ngFor or *ngIf gets desugared by Angular:

Summary

I hope you enjoyed this collection of videos. The topics covered in these videos (among others) tend to come up often, especially when designing third-party libraries:

  • how can we isolate component styles
  • how to design the API of a component
  • how to write maintainable tests
  • more advanced features like custom structural directives

To get notified of future posts, I invite you to subscribe to our newsletter: the subscription includes Angular News, PDFs on different Angular topics and videos like the ones above:

If you are just getting started learning Angular, have a look at the Angular for Beginners Course:

Have also a look also at other popular posts that you might find interesting: