How hide element of table by [hidden] in angular 2?
<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>