How to programmatically generate buttons with click functionality in Angular 2 and above

Question

How to programmatically generate buttons with click functionality in Angular 2 and above

Is there a way to dynamically create a button in Angular using innerHtml? I have managed to create the button, but unfortunately, its click event is not functioning properly. Can anyone provide guidance on how to resolve this issue?

Below is my HTML code snippet:

<div  [innerHTML]="answerPanelContent"></div>

And here is my TypeScript code snippet:

 answerPanelContent: any;

   constructor(private sanitizer: DomSanitizer){

   }
ngOnInit() {
 this.answerPanelContent =  this.sanitizer.bypassSecurityTrustHtml(`<button type="button" class="btn btn-primary float-left"
                                           (click)="removeAnswer()" title="Remove Answer"
                                           aria-label="Close">
                                          Remove</button>`);

  }
    removeAnswer(){
      alert('Button clicked!');
    }

If you'd like to view a working example, check out the StackBlitz URL provided: https://stackblitz.com/edit/angular-nka4w9

angular typescript angular8

Answer 1

Answer №1

I highly advise against using innerHTML in this situation. It is not intended for this purpose and does not align with the principles of Angular.

Utilizing *ngFor Directive

This approach is the recommended solution and follows the best practices of Angular.

component.ts

export class AppComponent  {
  public buttonTexts:Array<string> = ['First button'];

  public addButton(index:number):void {
    this.buttonTexts = [...this.buttonTexts, `button ${index}`];
  }
}

template.html

<button 
   *ngFor="let text of buttonTexts; let i = index;"
   (click)="addButton(i)">{{text}}</button>

Check out StackBlitz

Using Renderer2

Resort to this method only if *ngFor cannot address your specific requirements.

component.ts:

export class AppComponent implements AfterViewInit {
 
  @ViewChild('inserttarget', {static: false})
  public insertTarget:ElementRef; // utilize this for inserting into a particular element in your template

  constructor(
    private renderer:Renderer2, 
    private el:ElementRef // use this if you want to insert into the root of your template
  ) {

  }

  public ngAfterViewInit():void {
    this.addNewButton();
  }


  public addNewButton():void {
    const button = this.renderer.createElement('button');
    const buttonText = this.renderer.createText('Click me');

    this.renderer.appendChild(button, buttonText);
    this.renderer.appendChild(this.insertTarget.nativeElement, button); // employ this.el.nativeElement to insert into the root of the template
    this.renderer.listen(button, 'click', () => this.addNewButton());
  }
}

template.ts

<p #inserttarget>
  Some text
</p>

Here's a functional StackBlitz demonstration.

Answer 2

I highly advise against using innerHTML in this situation. It is not intended for this purpose and does not align with the principles of Angular.

Utilizing *ngFor Directive

This approach is the recommended solution and follows the best practices of Angular.

component.ts

export class AppComponent  {
  public buttonTexts:Array<string> = ['First button'];

  public addButton(index:number):void {
    this.buttonTexts = [...this.buttonTexts, `button ${index}`];
  }
}

template.html

<button 
   *ngFor="let text of buttonTexts; let i = index;"
   (click)="addButton(i)">{{text}}</button>

Check out StackBlitz

Using Renderer2

Resort to this method only if *ngFor cannot address your specific requirements.

component.ts:

export class AppComponent implements AfterViewInit {
 
  @ViewChild('inserttarget', {static: false})
  public insertTarget:ElementRef; // utilize this for inserting into a particular element in your template

  constructor(
    private renderer:Renderer2, 
    private el:ElementRef // use this if you want to insert into the root of your template
  ) {

  }

  public ngAfterViewInit():void {
    this.addNewButton();
  }


  public addNewButton():void {
    const button = this.renderer.createElement('button');
    const buttonText = this.renderer.createText('Click me');

    this.renderer.appendChild(button, buttonText);
    this.renderer.appendChild(this.insertTarget.nativeElement, button); // employ this.el.nativeElement to insert into the root of the template
    this.renderer.listen(button, 'click', () => this.addNewButton());
  }
}

template.ts

<p #inserttarget>
  Some text
</p>

Here's a functional StackBlitz demonstration.

How to programmatically generate buttons with click functionality in Angular 2 and above

Answer №1

Utilizing *ngFor Directive

Using Renderer2

Similar questions

Creating a library in Angular2 with multiple routes: a step-by-step guide!

An issue has occurred with the NullInjector, specifically regarding the AppModule and Storage in Ionic 4

Defining onClick event in Typescript and React.Konva

Using the <template> syntax to apply ngclass or [class.classname]

Ensure to pass the correct type to the useState function

In TypeScript, the Select element does not contain an options property

Exploring the Use of Enums in AngularJS HTML Tags

The Angular 16: Karma Test Explorer is reporting an error stating that afterAll, there is an Uncaught ReferenceError, as it

Unleashing the Power of Angular 2's Reactive Form Isolation Feature

Having trouble running tests on Angular service that has a Console constructor parameter

TypeScript versions 2.3 and 2.4 experiencing issues with generic overloads

Having trouble resolving the typescript package while integrating with another module

Identifying the various types in Typescript

Angular Unit Test: Received 1 argument instead of the expected 3

Troubleshooting problems with resolving deeply nested promises

Create a const assertion to combine all keys from an object into a union type

Issues with Loading childComponent in Angular 5 Parent Component

Using a single Angular component to dynamically load data based on the query string

A glitch was encountered during the execution of the ionic-app-scripts subprocess

The JSX element 'Provider<AnyAction>' does not match a valid instance type. The render() function should return compatible types