Member-only story
3 Steps to Creating Dynamic Views in Angular
Dynamically loading components without directives
Context
Often times, we need to render a child view dynamically. For instance, we might have a parent view that has a tab menu, and we’d like to render the views in accordance with whichever tab is being selected.
Being new to Angular, this is something I experience, and it took me a fair amount of time to get the implementation working despite following the official Angular guide. Reading Maxim Koretskyi’s article on DOM manipulation definitely helped my understanding, so I’ll recommend you give it a read, too, if you want more in-depth explanations.
In this piece, I’ll highlight and summarize three key concepts that’ll quickly get you running.
1. Creating the View
Before we can insert a view, we first have to know how to create one. Angular supports two types of views, namely host views and embedded views.
Host views
This is the view we use most frequently and are probably most familiar with. When Angular creates a component, we get a view that also contains the data of the component. When we talk about host views, they’re essentially the instantiated component views.
