Creating a Component on Button Click in Angular 13

Learn how to dynamically create components in Angular 13 with a simple example using the improved methods, moving beyond deprecated practices.
---
This video is based on the question https://stackoverflow.com/q/71294485/ asked by the user 'heiskareem' ( https://stackoverflow.com/u/15053463/ ) and on the answer https://stackoverflow.com/a/71295330/ provided by the user 'joka00' ( https://stackoverflow.com/u/7391435/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: creating a component when i click button, Angular 13

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Creating a Component on Button Click in Angular 13

Creating components dynamically in Angular can be quite a challenge, especially when using older methods that have been deprecated in newer versions. If you are using Angular 13 and facing confusion with creating a component when you click a button, you are not alone. This guide will walk you through the essential steps to achieve this in an efficient and modern way.

The Problem

You may find it necessary to add a component dynamically to your application without hardcoding it into your template. The usual method involved using ViewChild and ComponentFactoryResolver. However, the latter has recently been marked as deprecated since Angular version 13, which adds a layer of complexity for developers trying to create dynamic components.

The Solution

In Angular 13, creating components dynamically has been simplified. Let's break down how to effectively create a component on a button click without running into deprecated practices.

Step 1: Setting Up Your Component

First, ensure you have your main AppComponent set up. Below is the structure you will be using:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of the Key Parts

Imports: Make sure you import necessary modules like Component, ViewChild, and ViewContainerRef from @ angular/core.

ViewChild Decorator: The @ ViewChild decorator allows you to get a reference to the container in which you will dynamically create the new component. The ViewContainerRef gives you the ability to manipulate the DOM by creating components dynamically.

Constructor: In the constructor, we don't need to inject ComponentFactoryResolver anymore since Angular 13 has simplified the creation of components.

Creating the Component: In the addNewComponent function, instead of using ComponentFactoryResolver, you simply call createComponent method on the target reference to instantiate your new component (NewTileComponent).

Step 2: Add the Button in Your Template

Next, do not forget to add a button in your template (app.component.html) that will trigger the creation of the new component. Example:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By using the updated method in Angular 13, you can successfully create components dynamically on button clicks without the confusion surrounding deprecated methods. The new approach is not only cleaner but also promotes better practices in component creation.

In summary, the steps to achieve this are simple:

Set up your component using ViewChild and ViewContainerRef.

Directly call createComponent on the target reference when the button is clicked.

This modern approach helps you keep your code up-to-date and ensures compatibility with future Angular updates.
With these steps, you should be able to make dynamic components in Angular 13 effortlessly. Happy coding!

Видео Creating a Component on Button Click in Angular 13 канала vlogize