Introduction to Structural Directives
Explore the fundamentals of Angular structural directives to understand their role in dynamic DOM manipulation. Learn how TemplateRef and ViewContainerRef work together to add or remove elements, providing a foundation for implementing custom structural directives and managing views effectively.
We'll cover the following...
In this chapter, we’ll focus on structural directives. The main difference between structural and attribute directives is that structural directives change the actual DOM structure, while attribute directives just change the appearance of existing DOM elements.
Structural directives define the DOM structure by simply adding or removing elements in the DOM. This is very important to understand because structural directives receive a template that seems to be an actual DOM element. But, as a matter of fact, it’s not a DOM element at all. It’s just a virtual template. The directive uses this template to create a view which is then pushed to the DOM.
In this lesson, we focus more on theory so that we can learn the basics. In the next lesson, we focus on actual implementation. It’s ...