Манипуляция Dom в Angular 2

Question

Я создаю веб-сайт в угловом 2. У меня есть код JQuery для добавления 2 входов и 1 кнопки удаления при нажатии пользовательской кнопки, поэтому, когда пользователь нажимает кнопку удаления, удаляется входы (манипулирование DOM).

Jquery код:

//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--; 
     }); 

Как я могу сделать это в угловых 2? Я читал про elementRef и Renderer, но я так запутан.

Answer 1

В Angular вы не вводите HTML на свою страницу с JavaScript. (вы можете, но это не очень хорошая практика)

Весь HTML-код должен быть в вашем шаблоне, завернутый тегами * ngIf, чтобы добавлять и удалять элементы при необходимости.

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

Тогда можно привязать (нажмите) случае кнопка для переключения булево «isShowing» при нажатии:

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

Так что окончательная форма должна выглядеть примерно так:

<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>