DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

6

Create Angular Components Dynamically at runtime

Dynamically create and destroy components

We need two things.

  • Some components.
  • Some certain ViewContainer will be used to create this component.

The first part is just a class constructor of the component we want to create.

The ViewComtainer is more complex. Think of it as some box or container that can be created next to any DOM element in the template, and inside this container, we just put different views that must be rendered on the page. We can create our containers or reuse the ones Angular created automatically.

Each Angular component has its own ViewContainer. We can access this ViewContainer by injecting the ViewContainer using dependency injection. This ViewContainerRef provides various APIs to manipulate the views inside the container, such as createComponent.

Image description

It appears after viewing the AppComponent and not inside it.

If we want to specify explicitly the location in the template where this new component has to be created, we need to make our own ViewContainer.

To do this, we need an element that will act as an anchor; this can be any DOM element, or we can use ng-container construct and declare a template variable that will be used inside the viewChild function as an argument.

Image description

Image description

Image description

We can use the clear API that *ViewContainerRef * provides. This API allows us to remove everything from the particular ViewContainer.

Image description

We can also remove a specific view from the ViewContainer by using the remove method. And there, we can provide the index of the view that has to be removed.

Image description

Update component inputs

We can use the setInput method that ComponentRef provides.

Image description

We have to provide two arguments. The first is a string that represents the name of the input, and the second is the value of this input.

React to component output

We need to access the component instance and the emitter property; from there, we can subscribe to it and provide a callback function that will be executed when the event is emitted.

Image description

Demo

A complete example is here 👉 https://stackblitz.com/edit/stackblitz-starters-ugeydc?file=src%2Fmain.ts


I hope you found it helpful. Thanks for reading. 🙏

Let's get connected! You can find me on:

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay