achievements.component.html

    <h2>Achievements</h2>

    <ul class="list-group">
        <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> -->