Check out a free preview of the full Angular 13 Fundamentals course:
The "Dynamic Components" Lesson is part of the full, Angular 13 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas demonstrates dynamically attaching multiple components to the DOM using OnInit, ViewContainerRef, and CreateComponent. This function will read through the given array of components and generate DOM components accordingly.

Get Unlimited Access Now

Transcript from the "Dynamic Components" Lesson

[00:00:00]
>> One of the things that historically has been really hard in Angular that was very easy to do an Angular JS was the ability to dynamically instantiate and attach components to the doc. It was just the way that they built the view render engine. Pre IV that made this really really difficult.

[00:00:25] With the, I would say the migration into IV this became a lot easier. And with Angular 13, this became Incredibly easy, super easy, barely an inconvenience. And so I want to show an example about how to take a number of components and dynamically attach them to the DOM.

[00:00:55] And so we have a dynamic components example here. There's nothing happening yet, but I assure you, I do not have any aces up my sleeve, or do I? And with that, let's look into our code. Now, the one thing that I do wanna show, again, this would be the clone of like, nothing on my sleeve, is that inside of my dynamic-component.

[00:01:26] Component, all I have is just this toolbar, nothing else. And within my dynamic-component.component class, I have a little bit of setup code here. Which is fairly simple. I have a shapes array with a number of shape objects. So tight square square triangle circle square triangle. And the one thing that I have done for convenience is I've created a HashMap.

[00:02:03] Mapping the type of the shape to a component to its equivalent components of circle, if you can believe it is mapped to a circle component and so forth. Now, just to dispel any mystery about what's happening in these particular components these are very, very lightweight. And even just to reduce some of the cognitive overhead, I've went ahead and just put all of these components into a single file, kind of like us film a little react or react II when I did it this way.

[00:02:41] But just so that they're self contained, and I didn't have four files to represent something that was just a shape. We have our selector, a basic template and then I have a, if you can see here I have a div with a class of circle that I'm just drawing a circle on it.

[00:02:59] And I've done the same thing for square and triangle. And so there is very little here other than I just needed something to visually represent a component on the page that we could delineate it from everything else. And so what I wanna do is I want to go ahead and I want to iterate over this shapes array and attach these to the page.

[00:03:29] Now in order for this to work, I need to add in view container ref. So private and we'll go view container ref. And now that we have injected the view container ref Let's hop into our mg on a knit. And let's write some code. Now what's fun about this is that this is gonna be an incredibly concise bit of code to make this work.

[00:04:06] So the first thing I need to do is I'm going to iterate over shapes and so I haven't even gotten to the good part yet, shape and get rid of all these helpful not helpful. Hints here and, Now, moment of truth, the grand finale, we're gonna go this.viewContainerRef.

[00:04:38] Create component. And from here, we're going to look up our components. And we're gonna go shape.type. And so what this is going to do is essentially look into the HashMap here and pull down square component, triangle component and circled component. And so this entire example, comes down to this single line, which I think is really awesome.

[00:05:11] So if you contain a ref.createcomponent. And now if we go back into our code here we go and so that was almost too easy. It kinda feels like a trap but I assure you it's not but let me before we end this particular example, I want to just illustrate a use case where this can be very, handy.

[00:05:46] Imagine you have a media, an array of various media elements. And so I'm imagining that you have pictures, videos, text or whatever it is. And you are able to create an interface that across the different media types that it is consistent and so you might have on their data.

[00:06:18] And so it might be like media dot data and in there you might have the URL to either the video or the picture Or the text for the note and within that you would have immediate.type. And so based on the type is you iterate over this that you're now able to Do let's say like kind of a grid layout to where the data is basically the same.

[00:06:49] Creating the data is basically the same, but you want to render that entirely different. And so this is a really, really great way to use a homogenous data set that is defined by an interface in adheres to it, but the visual representation of that is wildly different. And so this is where you could render a picture, an image, a video, whatever it is, and create a really kind of a unique immersive experience visually.

[00:07:25] But under the hood, that there's not a lot to it. And so then within each one of these components, in this case, it's square triangle circle, that you can then have the logic to say well, this is a video. So I'm going to render the video and so now you're able to encapsulate the the rendering concerns into the individual component.

[00:07:48] And all you have to do is just add them to the page and it takes care of itself. So I think this is really cool and the fact that we're able to do this with this single command here is I think fantastic, I'm super happy this is probably the one the one thing.

[00:08:05] That with Angular 13 I think they did a really good job and it is as simple as can be.