Add button dynamically in html

Ionic Framework ionic-v3
1

Hello, I’m adding buttons like this, but I can’t get the event
adding.

.ts
public addBtn(){
var html=’<ion-button expand=“block” (click)=“test()”>Ingresar 1’;
jQuery(".modulos_clinicos").html(html);
}

2

Assuming you’re using Angular, a much more idiomatic way of doing this is to modify a backing array in the controller and using the ngFor structural directive in the template. The technique is described in detail in part 2 of the Tour of Heroes. I would recommend making an effort to minimize all jQuery usage as much as possible.

3

Thanks, I understand using ngFor but I get the data from an AJAX so I don’t know how to pass this new HTML to the current one to be able to refresh everything and get events from these new generated buttons

4
  1. Please dont use any query selector in NG world.
  2. You can use <div [innerHTML]="htmlStr"></div> to display HTML code.
    But not all html tag can be use.
5

Thanks, I learned to use the innerHTML, but it doesn’t let me load buttons with link (click) = ‘inside (2)’ or with routerLink="/ login" and I just need to load this, how can it be done?

6

Ionic apps typically send and receive information from the internet. JSON is a great format for doing that. My personal opinion is that HTML is a terrible one, so if you don’t get any better answers, I would rearchitect the communication protocol to eliminate all passing of HTML from server to client, replacing it with equivalent information packaged in JSON or some other domain-specific language built atop JSON.

7

I have a simple HTML document that includes a button named click me how to add an event listener to a dynamically added element!

8

In the end I solved it with an array in the .ts and in the html use the ngFor, thanks

<ion-list padding>
     <ion-item *ngFor='let item of array_clinicos' color='primary' (click)="interior(item.id)">
             <ion-icon slot='start' name='arrow-round-forward'></ion-icon>
             <ion-label>{{item.name}}</ion-label>
     </ion-item>
 </ion-list>