add-attribute.component.html

<div class="btn-group mr-2" role="group" aria-label="First group">
    <button (click)="openModal(template)" title="Add new attribute" class="btn btn-outline-success">
        <span class="fas fa-plus"></span> New attribute
    </button>
</div>

<ng-template #template>
    <div class="modal-header">
        <h4 class="modal-title pull-left"><strong>Available columns</strong></h4>
    </div>
    <div class="modal-body">
        <app-spinner *ngIf="columnListIsLoading"></app-spinner>

        <table *ngIf="columnListIsLoaded" class="table table-bordered" aria-describedby="Lost of available columns">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Type</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let column of columnList">
                    <td>{{ column.name }}</td>
                    <td>{{ column.type }}</td>
                    <td>
                        <span *ngIf="alreadyExists(column.name)" class="badge badge-secondary">Already exists</span>
                        <button *ngIf="!alreadyExists(column.name)" (click)="addNewAttribute(column)" class="btn btn-outline-primary">Add</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <p>
            <button (click)="modalRef.hide()" class="btn btn-outline-primary">
                Close
            </button>
        </p>
    </div>
</ng-template>