5 Advanced components
This chapter covers
- How to handle and optimize change detection
- Communication between different components
- Ways to style and different ways styles are encapsulated
- Rendering components dynamically on the fly
Chapter 4 covered many of the basics of components, but there is so much more! Here we’ll dive into additional capabilities that will come in handy as you build more interesting applications.
We’ll look at how change detection works in more detail, and look at how to use the OnPush capability to reduce the amount of work Angular has to do to improve rendering efficiency.
Although components can use inputs and outputs, there are additional ways to have components talk to one another. We’ll look at why you might choose to use a different approach and how to implement it.
There are three primary ways to render styles for a component, and choosing different modes potentially has a significant impact on the way your components are displayed. You may want to internalize the CSS styling as much as possible, or you may not want any styling to be internalized, but to use the global CSS styles instead.
Finally, we’ll look at how to render a component dynamically, and why you might want to do that. It’s not very common, but there are moments where it’s useful.
As discussed in chapter 4, I highly recommend that you keep your components focused. As we learn more about component capabilities, you’ll see that it’s important to avoid overloading your components.