database-table.component.html

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Label</th>
                <th scope="col">Name</th>
                <th scope="col">Type</th>
                <th scope="col">Host</th>
                <th scope="col">Port</th>
                <th scope="col">Login</th>
                <th scope="col">Password</th>
                <th scope="col">Nb surveys</th>
                <th scope="col">Edit</th>
                <th scope="col">Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let database of databaseList">
                <td class="align-middle">{{ database.id }}</td>
                <td class="align-middle">{{ database.label }}</td>
                <td class="align-middle">{{ database.dbname }}</td>
                <td class="align-middle">{{ database.dbtype }}</td>
                <td class="align-middle">{{ database.dbhost }}</td>
                <td class="align-middle">{{ database.dbport }}</td>
                <td class="align-middle">{{ database.dblogin }}</td>
                <td class="align-middle">*******</td>
                <td class="align-middle">{{ getNbSurveyByDatabase(database.id) }}</td>
                <td class="align-middle">
                    <a title="Edit this database" routerLink="/admin/edit-database/{{database.id}}" class="btn btn-outline-primary">
                        <span class="fas fa-edit"></span>
                    </a>
                </td>
                <td class="align-middle">
                    <app-delete-btn
                        [disabled]="!isNoSurveyAttachedToDatabase(database.id)"
                        [type]="'database'"
                        [label]="database.label"
                        (confirm)="deleteDatabase.emit(database)">
                    </app-delete-btn>
                </td>
            </tr>
        </tbody>
    </table>
</div>