argos/dmp-frontend/src/app/projects/project.html

<div style="margin: auto; max-width: 1000px; margin-top:50px">
    <data-table id="films-grid" headerTitle="My Projects" [items]="projects" [itemCount]="projectCount" (reload)="reloadProjects($event)"
        [limit]="8" [sortBy]="'rating'" [sortAsc]="false" [selectColumn]="true" [multiSelect]="false" [substituteRows]="false"
        [expandableRows]="true" [translations]="translations" [indexColumnHeader]="'#'" [selectOnRowClick]="true">
        <template #dataTableExpand let-item="item">
            <div>
                <!-- <a [routerLink]="['/dynamic-form', item.id]"> {{ item.dmp.id }}</a> -->
                <table class="table">
                    <thead class="thead-inverse">
                        <tr>

                            <th>Dmp</th>
                            <th>Id</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>

                            <!-- <td> <a [routerLink]="['/dynamic-form', item.id]"> {{ item.dmp.id }}</a></td>-->
                            <td> <a [routerLink]="['/dataset']"> {{ item.dmp.id }}</a></td>
                            <td>{{item.dmp.id}}</td>
                        </tr>

                    </tbody>
                </table>

            </div>

        </template>
        <data-table-column [property]="'name'" [header]="'Label'" [sortable]="true">
        </data-table-column>
        <data-table-column [property]="'abbreviation'" [header]="'Abbreviation'" [sortable]="true">
        </data-table-column>
        <data-table-column [property]="'startDate'" [header]="'Start Date'" [sortable]="true">
        </data-table-column>
        <data-table-column [property]="'endDate'" [header]="'End Date'" [sortable]="true">
        </data-table-column>
        <data-table-column [property]="'active'" [header]="'Status'" [width]="100" [resizable]="true">
            <template #dataTableHeader let-item="item">
                <span>Active</span>
            </template>
            <template #dataTableCell let-item="item">
                <span style="color: grey">
            <span class="fa fa-check" *ngIf="item.active"></span>
                <span class="fa fa-times" *ngIf="!item.active"></span>
                </span>
            </template>
        </data-table-column>
    </data-table>
    <div style="margin-top: 10px">
        <b>Selected:</b>
        <span *ngIf="projectsTable.selectedRow == null"><i>No item selected</i></span>
        <span [textContent]="projectsTable.selectedRow && projectsTable.selectedRow.item.name"></span>
    </div>
    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">New Project</button>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create New Project</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="label-name" class="form-control-label">Label:</label>
                        <input type="text" class="form-control" id="label-name">
                    </div>
                    <div class="form-group">
                        <label for="abbreviation-text" class="form-control-label">Abbreviation:</label>
                        <input class="form-control" id="abbreviation-text">
                    </div>
                    <div class="form-group">
                        <label for="reference-text" class="form-control-label">Reference:</label>
                        <input class="form-control" id="reference-text">
                    </div>
                    <div class="form-group">
                        <label for="uri-text" class="form-control-label">Uri:</label>
                        <input class="form-control" id="uri-text">
                    </div>
                    <div class="form-group">
                        <label for="start-date" class="form-control-label">Start Date:</label>
                        <input class="form-control" id="startDate-date">
                    </div>
                    <div class="form-group">
                        <label for="end-date" class="form-control-label">End Date:</label>
                        <input class="form-control" id="endDate-date">
                    </div>
                    <div class="form-group">
                        <label for="code-name" class="form-control-label">Code:</label>
                        <input type="text" class="form-control" id="code-name" disabled>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save project</button>
            </div>
        </div>
    </div>
</div>

<a href="#" (click)="signOut2();">Sign out</a>
<router-outlet></router-outlet>