Dom in Angular manipulieren 2

Question

Ich erstelle ein Web in eckigen 2. Ich habe einen Jquery-Code zum Hinzufügen von 2 Eingaben und 1 Schaltfläche löschen, wenn eine benutzerdefinierte Schaltfläche angeklickt wird. Wenn der Benutzer auf die Schaltfläche Löschen klickt, wird es entfernt die Eingaben (Manipulation des DOM).

JQuery-Code:

//Adiciona campos extra nos sócios 
    var campos_max = 10; //max de 10 campos 
    var x = 1; // campos iniciais 

     $('#add_field').click (function(e) { 
      e.preventDefault();  //prevenir novos clicks 
       if (x < campos_max) { 
         $('#listas').append('<div>\ 
           <div class="form-group">\ 
     <label class="col-sm-2 control-label">Nome sócio:</label>\ 
     <div class="input-group">\ 
      <span class="input-group-addon">*</span>\ 
       <input class="form-control socio" name="nome[]" type="text" placeholder="Nome sócio..." required>\ 
     </div>\ 
      </div>\ 
      <div class="form-group">\ 
     <label class="col-sm-2 control-label">Participação (%):</label>\ 
     <div class="input-group">\ 
      <span class="input-group-addon">*</span>\ 
       <input class="form-control socio part" name="participacao[]" type="text" placeholder="Participação..." required number="true">\ 
     </div>\ 
      </div>\ 
      <input href="#" type="button" id="add_field" value="Remover campo" class="remover_campo btn btn-warning">\ 
           </div>'); 
         x++; 
       } 
     }); 

     // Remover o div anterior 
     $('#listas').on("click",".remover_campo",function(e) { 
       e.preventDefault(); 
       $(this).parent('div').remove(); 
       x--; 
     }); 

Wie kann ich dies in Angular 2? Ich habe über ElementRef und Renderer gelesen, aber ich bin so verwirrend.

Answer 1

In Angular injizieren Sie nicht HTML in Ihre Seite von JavaScript. (Sie können, aber es ist keine gute Praxis)

Der gesamte HTML-Code sollte in Ihrer Vorlage enthalten sein und mit * ngIf -Tags versehen sein, um die Elemente bei Bedarf hinzufügen und entfernen zu können.

<div *ngIf="isShowing"> your HTML here </div> 

Dann können Sie zu einem Ereignis der Schaltfläche binden (klicken), um die boolean 'isShowing' zu wechseln, wenn darauf geklickt:

<input (click)="isShowing=false"> 

So ist die endgültige Form wie folgt aussehen sollte:

<div> 
    <h2>form</h2> 
    <form> 
    <div *ngIf="showForm"> 
     <input type="text"> 
     <input type="text"> 
     <button type="button" (click)="showForm=false">hide form</button> 
    </div> 
    <button *ngIf="!showForm" type="button" (click)="showForm=true">show form</button> 
    </form> 
</div>