<div class="row">
    <h1 class="heading" *ngIf="Allcourserecords.length > 0">Courses
        <span>[{{Allcourserecords.length}}]</span>
    </h1>
    <app-slider [valueStep]='300' *ngIf="Allcourserecords.length > 0">
        <div class="col-md-2 coursecard cursorPointer" *ngFor="let x of Allcourserecords" (click)="gocoursePage(x.pgCourseDetails.courseLink)">
            <div class="mandatory" *ngIf="x.recommended">
                <img src="{{imagelink}}mandatory.png" class="img-responsive">
            </div>
            <div class="coursecardheat">
                <img src="{{x.pgCourseDetails?.image1}}" class="img-responsive">
            </div>
            <div class="coursecardbot">
                <p class="coursetitle ctitlee">{{x?.pgCourseDetails?.courseName}}</p>
                <div class="coursecardrate">
                    <p class="left">
                        <img src="" class="" alt="">
                        <i class="fa fa-clock-o fablue" aria-hidden="true"></i> {{changeTimeformat(x?.pgCourseDetails?.duration)}} </p>
                </div>
            </div>

            <div class="coursecardfot">
                <button [ngStyle]="{'background-color':getcolor(x.status , 'color')}">
          <img src="{{imagelink}}{{getcolor(x.status,'img')}}.png" alt="" class="img-responsive"> {{getcurrentstatus(x?.status)}}</button>
            </div>
            <div class="content-box" *ngIf="x?.recommended">
                <div id="ribbon-container">
                    <a id="ribbon"> *
              <span class="text-mindetroy">Mandatory</span>
            </a>
                </div>
            </div>
        </div>
    </app-slider>
</div>