title: How hide element of table by [hidden] in angular 2?
body: <p>I have same table, with buttons add rows event. </p>
  
  <p><a href="http://i.stack.imgur.com/9uoFV.png" rel="nofollow">Table application</a></p>
  
  <p>Que.:
  I want hide the table element, and add show click event on button "Добавить", this is sample of html code: </p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading text-center"&gt;
          &lt;h4 class="panel-title"&gt;
              Подразделение (ввод)
          &lt;/h4&gt;
      &lt;/div&gt;
      &lt;table class="table table-bordered"&gt;
          &lt;tr&gt;
              &lt;th&gt;Номер&lt;/th&gt;
              &lt;th&gt;Тип подразделения&lt;/th&gt;
              &lt;th&gt;Тип района&lt;/th&gt;
              &lt;th&gt;Точки старта&lt;/th&gt;
              &lt;th&gt;Удалить&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr *ngFor="let row of rowDataMainForm; let mainFormIndex = index"&gt;
              &lt;td&gt;
                  &lt;input type="text" class="form-control"&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;select class="form-control"&gt;
                      &lt;option selected&gt;-----&lt;/option&gt;
                      &lt;option value="Д"&gt;Д&lt;/option&gt;
                      &lt;option value="Б"&gt;Б&lt;/option&gt;
                      &lt;option value="П"&gt;П&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;select class="form-control"&gt;
                      &lt;option selected&gt;-----&lt;/option&gt;
                      &lt;option value="Основной"&gt;Основной&lt;/option&gt;
                      &lt;option value="Запасной"&gt;Запасной&lt;/option&gt;
                      &lt;option value="Временный"&gt;Временный&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div class="panel panel-default smaller"&gt;
                      &lt;table class="table table-condensed table-bordered"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;номер&lt;/th&gt;
                                  &lt;th&gt;радиус&lt;/th&gt;
                                  &lt;th&gt;X&lt;/th&gt;
                                  &lt;th&gt;Y&lt;/th&gt;
                                  &lt;th&gt;Высота&lt;/th&gt;
                                  &lt;th&gt;Геометрия&lt;/th&gt;
                                  &lt;th&gt;Ракеты&lt;/th&gt;
                                  &lt;th&gt;&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tr *ngFor="let newrow of row.tochkiStartaForms; let TochkiStartaFormIndex = index"&gt;
                              &lt;td&gt;
                                  &lt;input type="text" class="form-control"&gt;
                              &lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input type="text" class="form-control"&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input type="text" class="form-control"&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input type="text" class="form-control"&gt;
                              &lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;div class="panel panel-default smaller"&gt;
                                      &lt;table class="table table-condensed table-bordered"&gt;
                                          &lt;thead&gt;
                                              &lt;tr&gt;
                                                  &lt;th&gt;Тип&lt;/th&gt;
                                                  &lt;th&gt;Тип ГЧ&lt;/th&gt;
                                                  &lt;th&gt;Кол-во&lt;/th&gt;
                                                  &lt;th&gt;&lt;/th&gt;
                                              &lt;/tr&gt;
                                          &lt;/thead&gt;
                                          &lt;tr *ngFor="let suchnewrow of newrow.rocketForms; let RocketFormIndex = index"&gt;
                                              &lt;td&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;/td&gt;
                                              &lt;td&gt;
                                                  &lt;button (click)="deleteRowRocketForm(newrow.rocketForms, RocketFormIndex)" type="button" class="btn btn-default" style="padding: 2px;"&gt;
                                                      Удалить
                                                  &lt;/button&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/table&gt;
                                      &lt;div class="panel-footer"&gt;
                                          &lt;div class="container-build"&gt;
                                              &lt;button (click)='addRowRocketForm(newrow.rocketForms)' type="button" class="btn btn-default" style="padding: 2px"&gt;
                                                  Добавить
                                              &lt;/button&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;button (click)='deleteRowTochkiStartaForm(row.tochkiStartaForms, TochkiStartaFormIndex)' type="button" class="btn btn-default" style="padding: 2px"&gt;
                                      Удалить
                                  &lt;/button&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;div class="panel-footer"&gt;
                          &lt;div class="container-build"&gt;
                              &lt;button (click)='addRowTochkiStartaForm(row.tochkiStartaForms)' type="button" class="btn btn-default" style="padding: 2px"&gt;
                                  Добавить
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;button (click)="deleteRowMainForm(rowDataMainForm, mainFormIndex)" type="button" class="btn btn-default" style="padding: 2px"&gt;
                      Удалить
                  &lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;div class="panel-footer"&gt;
          &lt;div class="container-build"&gt;
              &lt;button (click)='addRowMainForm(rowDataMainForm)' type="button" class="btn btn-default" style="padding: 2px"&gt;
                  Добавить
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I know about [hidden], but how to use it? </p>