game.component.html

<div>
    <h2>
        <span jhiTranslate="gamesApp.game.home.title">Games</span>
        <button class="btn btn-primary float-right jh-create-entity create-game" [routerLink]="['/', { outlets: { popup: ['game-new'] } }]">
            <span class="fa fa-plus"></span>
            <span  jhiTranslate="gamesApp.game.home.createLabel">
            Create new Game
            </span>
        </button>
    </h2>
    <jhi-alert></jhi-alert>
    <div class="row">
    </div>
    <br/>
    <div class="table-responsive" *ngIf="games">
        <table class="table table-hover">
            <thead>
            <!-- predicate: will storage the jhiSortBy clicked -->
            <!-- ascending: It storage the model which indicates the type of sort asc or desc -->
            <!-- reset.bind(this): When it clicks on a th, the callback will be executed. In this case, the sintax is: <function_name>.bind(this) 
                Here is an example: https://stackoverflow.com/questions/35328652/angular2-pass-callback-function-to-child-component-as-input#answer-42131227
                -->
            <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="reset.bind(this)">
            <th jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <span class="fa fa-sort"></span></th>
            <th jhiSortBy="name"><span jhiTranslate="gamesApp.game.name">Name</span> <span class="fa fa-sort"></span></th>
            <th jhiSortBy="description"><span jhiTranslate="gamesApp.game.description">Description</span> <span class="fa fa-sort"></span></th>
            <th jhiSortBy="url"><span jhiTranslate="gamesApp.game.url">URL</span> <span class="fa fa-sort"></span></th>
            <th jhiSortBy="rank"><span jhiTranslate="gamesApp.game.rank">Rank</span> <span class="fa fa-sort"></span></th>
            <th jhiSortBy="creationDate"><span jhiTranslate="gamesApp.game.creationDate">Creation date</span> <span class="fa fa-sort"></span></th>
             <th></th>
            </tr>
            </thead>
            <tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
            <!-- It uses trackBy just for perfomance optimization and its not necessary used. http://blog.angular-university.io/angular-2-ngfor/#whentousetrackby -->
            <tr *ngFor="let game of games ;trackBy: trackId">
                <td><a [routerLink]="['../game', game.id ]">{{game.id}}</a></td>
                <td>{{game.name}}</td>
                <td>{{game.description}}</td>
                <td>{{game.url}}</td>
                <td>{{game.rank}}</td>
                <td>{{game.creationDate | date:'mediumDate'}}</td>
                <td class="text-right">
                    <div class="btn-group flex-btn-group-container">
                        <button type="submit"
                                [routerLink]="['../game', game.id ]"
                                class="btn btn-info btn-sm">
                            <span class="fa fa-eye"></span>
                            <span class="hidden-md-down" jhiTranslate="entity.action.view">View</span>
                        </button>
                        <button type="submit"
                                [routerLink]="['/', { outlets: { popup: 'game/'+ game.id + '/edit'} }]"
                                replaceUrl="true"
                                class="btn btn-primary btn-sm">
                            <span class="fa fa-pencil"></span>
                            <span class="hidden-md-down" jhiTranslate="entity.action.edit">Edit</span>
                        </button>
                        <button type="submit"
                                [routerLink]="['/', { outlets: { popup: 'game/'+ game.id + '/delete'} }]"
                                replaceUrl="true"
                                class="btn btn-danger btn-sm">
                            <span class="fa fa-remove"></span>
                            <span class="hidden-md-down" jhiTranslate="entity.action.delete">Delete</span>
                        </button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>