How hide element of table by [hidden] in angular 2?

Question

I have same table, with buttons add rows event.

Table application

Que.: I want hide the table element, and add show click event on button "Добавить", this is sample of html code:

<div class="col-md-12">
<div class="panel panel-default">
    <div class="panel-heading text-center">
        <h4 class="panel-title">
            Подразделение (ввод)
        </h4>
    </div>
    <table class="table table-bordered">
        <tr>
            <th>Номер</th>
            <th>Тип подразделения</th>
            <th>Тип района</th>
            <th>Точки старта</th>
            <th>Удалить</th>
        </tr>
        <tr *ngFor="let row of rowDataMainForm; let mainFormIndex = index">
            <td>
                <input type="text" class="form-control">
            </td>
            <td>
                <select class="form-control">
                    <option selected>-----</option>
                    <option value="Д">Д</option>
                    <option value="Б">Б</option>
                    <option value="П">П</option>
                </select>
            </td>
            <td>
                <select class="form-control">
                    <option selected>-----</option>
                    <option value="Основной">Основной</option>
                    <option value="Запасной">Запасной</option>
                    <option value="Временный">Временный</option>
                </select>
            </td>
            <td>
                <div class="panel panel-default smaller">
                    <table class="table table-condensed table-bordered">
                        <thead>
                            <tr>
                                <th>номер</th>
                                <th>радиус</th>
                                <th>X</th>
                                <th>Y</th>
                                <th>Высота</th>
                                <th>Геометрия</th>
                                <th>Ракеты</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tr *ngFor="let newrow of row.tochkiStartaForms; let TochkiStartaFormIndex = index">
                            <td>
                                <input type="text" class="form-control">
                            </td>
                            <td></td>
                            <td>
                                <input type="text" class="form-control">
                            </td>
                            <td>
                                <input type="text" class="form-control">
                            </td>
                            <td>
                                <input type="text" class="form-control">
                            </td>
                            <td></td>
                            <td>
                                <div class="panel panel-default smaller">
                                    <table class="table table-condensed table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Тип</th>
                                                <th>Тип ГЧ</th>
                                                <th>Кол-во</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tr *ngFor="let suchnewrow of newrow.rocketForms; let RocketFormIndex = index">
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td>
                                                <button (click)="deleteRowRocketForm(newrow.rocketForms, RocketFormIndex)" type="button" class="btn btn-default" style="padding: 2px;">
                                                    Удалить
                                                </button>
                                            </td>
                                        </tr>
                                    </table>
                                    <div class="panel-footer">
                                        <div class="container-build">
                                            <button (click)='addRowRocketForm(newrow.rocketForms)' type="button" class="btn btn-default" style="padding: 2px">
                                                Добавить
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <button (click)='deleteRowTochkiStartaForm(row.tochkiStartaForms, TochkiStartaFormIndex)' type="button" class="btn btn-default" style="padding: 2px">
                                    Удалить
                                </button>
                            </td>
                        </tr>
                    </table>
                    <div class="panel-footer">
                        <div class="container-build">
                            <button (click)='addRowTochkiStartaForm(row.tochkiStartaForms)' type="button" class="btn btn-default" style="padding: 2px">
                                Добавить
                            </button>
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <button (click)="deleteRowMainForm(rowDataMainForm, mainFormIndex)" type="button" class="btn btn-default" style="padding: 2px">
                    Удалить
                </button>
            </td>
        </tr>
    </table>
    <div class="panel-footer">
        <div class="container-build">
            <button (click)='addRowMainForm(rowDataMainForm)' type="button" class="btn btn-default" style="padding: 2px">
                Добавить
            </button>
        </div>
    </div>
</div>

I know about [hidden], but how to use it?

Answer 1

It's recommended to use ngIf instead of hidden. hidden hides elements, ngIf doesn't insert element to DOM -> better performance in most of cases (not always)

So your code will look like this:

<button (click)="hideElement = !hideElement">Toggle Element</button>
<div *ngIf="hideElement">
    This is hidden if my variable hideElement == true
</div>

Note: In case you are going to show/hide an element very often, then it makes more sense to really show/hide (using [hidden]) instead of add/remove (using *ngIf)

Answer 2

You have to provide an expression for [hidden] to use. You can use a boolean variable for example. If the expression is true, the element will be hidden.

Typescript example would be:

class MyController{
    private hideElement: boolean = false;

    toggleElement(){
        if(this.hideElement){
            this.hideElement = false;
        else
            this.hideElement = true;
    }
}

Now in your template, you can do this:

<button (click)="toggleElement()">Toggle Element</button>
<div [hidden]="hideElement">
    This is hidden if my variable hideElement == true
</div>