how to render a HTML template on button click in angular

How to Render an HTML Template on Button Click in Angular

As a tech professional working with TypeScript and Angular, you may come across the need to dynamically render an HTML template on a button click. In this blog post, we will explore different solutions to achieve this functionality.

Solution 1: Using *ngIf Directive

One way to render an HTML template on button click is by using the *ngIf directive in Angular. By binding the *ngIf directive to a boolean variable, we can control the visibility of the HTML template.

First, let’s create a button in our component’s HTML template:

Toggle Template

Next, we can use the *ngIf directive to conditionally render the HTML template:

  
This is the rendered HTML template
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Now, when the button is clicked, the value of the showTemplate variable will be toggled, and the HTML template will be rendered or hidden accordingly.

Solution 2: Using ng-template and TemplateRef

Another approach to render an HTML template on button click is by using the ng-template directive and TemplateRef in Angular.

First, let’s define our HTML template using the ng-template directive:

  
This is the rendered HTML template
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Next, we need to create a reference to the ng-template using @ViewChild decorator in our component:

@ViewChild('template') templateRef: TemplateRef;

Then, we can create a method in our component to toggle the visibility of the HTML template:

showTemplate = false;

toggleTemplate() {
  this.showTemplate = !this.showTemplate;
}

Finally, we can use the ng-container directive along with the ngTemplateOutlet directive to render the HTML template:

Toggle Template

Now, when the button is clicked, the HTML template will be rendered or hidden based on the value of the showTemplate variable.

These are two different solutions to render an HTML template on button click in Angular. Choose the one that best suits your requirements and implement it in your project.

Happy coding!