achievements.component.html

    <h2>Achievements</h2>

    <ul class="list-group" *ngIf="statistics">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            More than 500 views
            <span *ngIf="statistics?.views <= 500" class="badge badge-primary badge-pill">{{statistics?.views}}</span>
            <fa-icon icon="check" *ngIf="statistics?.views > 500" class="greeniconcolor"></fa-icon>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            More than 100 views
            <span *ngIf="statistics?.views <= 100" class="badge badge-primary badge-pill">{{statistics?.views}}</span>
            <fa-icon icon="check" *ngIf="statistics?.views > 100" class="greeniconcolor"></fa-icon>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            More than 10 views
            <span *ngIf="statistics?.views <= 10" class="badge badge-primary badge-pill">{{statistics?.views}}</span>
            <fa-icon icon="check" *ngIf="statistics?.views > 10" class="greeniconcolor"></fa-icon>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            More than 500 downloads
            <span *ngIf="statistics?.downloads <= 500" class="badge badge-primary badge-pill">{{statistics?.downloads}}</span>
            <fa-icon icon="check" *ngIf="statistics?.downloads > 500" class="greeniconcolor"></fa-icon>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            More than 100 downloads
            <span *ngIf="statistics?.downloads <= 100" class="badge badge-primary badge-pill">{{statistics?.downloads}}</span>
            <fa-icon icon="check" *ngIf="statistics?.downloads > 100" class="greeniconcolor"></fa-icon>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            More than 10 downloads
            <span *ngIf="statistics?.downloads <= 10" class="badge badge-primary badge-pill">{{statistics?.downloads}}</span>
            <fa-icon icon="check" *ngIf="statistics?.downloads > 10" class="greeniconcolor"></fa-icon>
        </li>
    </ul>

    <!-- <button (click) = "getTotalNumberOfViews()" class="btn btn-primary"> Get number of views </button> -->