mock-search.component.html

<div class="row">
    <div class="card-container col-md-6 col-lg-4 col-xl-3" *ngFor="let result of mockResults">
        <!-- cards -->
        <div class="card">
            <img class="card-img-top" src="{{result.imageURL}}" alt="result image" style="width: 100px; height: auto; margin-left: auto; margin-right: auto; padding-top: 15px; box-shadow: 3px;">
            <div class="card-body">
                <h5 class="card-title">{{result.title}}</h5>
                <p class="card-text" style="text-align: left;">{{result.description}}</p>
            </div>
            <div class="card-body">
                <!-- card rating-->
                <div style="float: left; width: 100%; margin-bottom: 5px;">
                    <div style="float: left; padding-top: 15px;">
                        <p class="card-text" jhiTranslate="searchResult.details.rating"></p>
                    </div>
                    <div class="star-container">
                        <span class="star"
                              *ngFor="let starNumber of [1,2,3,4,5]"
                              [ngClass]="{'star-marked': result.rating >= starNumber,
                                          'star-unmarked': result.rating < starNumber}">
                        </span>
                    </div>
                    <!--<div class="rate">
                        <input type="radio" id="card-star5" name="rate" value="5" />
                        <label for="card-star5" title="text">5 stars</label>
                        <input type="radio" id="card-star4" name="rate" value="4" />
                        <label for="card-star4" title="text">4 stars</label>
                        <input type="radio" id="card-star3" name="rate" value="3" />
                        <label for="card-star3" title="text">3 stars</label>
                        <input type="radio" id="card-star2" name="rate" value="2" />
                        <label for="card-star2" title="text">2 stars</label>
                        <input type="radio" id="card-star1" name="rate" value="1" />
                        <label for="card-star1" title="text">1 star</label>
                    </div>-->
                </div> <!-- card rating end-->

                <!-- card bookmark-->
                <div style="float: left; width: 100%;">
                    <div style="float: left;">
                        <p class="card-text" jhiTranslate="searchResult.details.bookmark"></p>
                    </div>
                    <div class="form-check" style="float: right; padding-right: 10px;">
                        <input class="form-check-input" type="checkbox" value="" id="card-defaultCheck1">
                        <label class="form-check-label" for="card-defaultCheck1"></label>
                    </div>
                </div> <!-- card bookmark end-->
            </div>
            <div class="card-body" style="text-align: center;">


                <div class="container">
                    <!-- Button to Open the Modal -->
                    <button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#myModal" (click)="selectedResult = result">Open course</button>
                </div>

            </div>
        </div>
    </div> <!-- card end--> <!-- col-sm-3 end -->
</div>

<!-- The Modal -->
<div *ngIf="selectedResult">
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <img class="card-img-top" src="{{selectedResult.imageURL}}" alt="result image" style="width: 50px; height: auto; float: left;">
                    <h4 class="modal-title">{{selectedResult.title}}</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <p style="padding-bottom: 15px; text-align: justify;">{{selectedResult.description}}</p>
                        </div>
                        <div class="row">
                            <div class="col-6 col-md-4" style="margin-bottom: 15px;">
                                <p style="text-align: left;"><strong jhiTranslate="searchResult.details.details"></strong></p>
                                <hr>

                                <!-- modal rating-->
                                <div style="float: left; width: 100%; margin-bottom: 5px;">
                                    <div style="float: left; padding-top: 15px;">
                                        <p class="card-text" jhiTranslate="searchResult.details.rating"></p>
                                    </div>
                                    <div class="star-container">
                                        <span class="star"
                                              *ngFor="let starNumber of [1,2,3,4,5]"
                                              [ngClass]="{'star-marked': selectedResult.rating >= starNumber,
                                                          'star-unmarked': selectedResult.rating < starNumber}">
                                        </span>
                                    </div>
                                    <!--<div class="rate">
                                        <input type="radio" id="modal-star5" name="rate" value="5" />
                                        <label for="modal-star5" title="text">5 stars</label>
                                        <input type="radio" id="modal-star4" name="rate" value="4" />
                                        <label for="modal-star4" title="text">4 stars</label>
                                        <input type="radio" id="modal-star3" name="rate" value="3" />
                                        <label for="modal-star3" title="text">3 stars</label>
                                        <input type="radio" id="modal-star2" name="rate" value="2" />
                                        <label for="modal-star2" title="text">2 stars</label>
                                        <input type="radio" id="modal-star1" name="rate" value="1" />
                                        <label for="modal-star1" title="text">1 star</label>
                                    </div>-->
                                </div> <!-- modal rating end-->

                                <!-- modal bookmark-->
                                <div style="float: left; width: 100%; margin-bottom: 25px;">
                                    <div style="float: left;">
                                        <p class="card-text" jhiTranslate="searchResult.details.bookmark"></p>
                                    </div>
                                    <div class="form-check" style="float: right; padding-right: 10px;">
                                        <input class="form-check-input" type="checkbox" value="" id="modal-defaultCheck1">
                                        <label class="form-check-label" for="modal-defaultCheck1"></label>
                                    </div>
                                </div> <!-- modal bookmark end-->

                                <button type="button" class="btn btn-outline-secondary" style="display: block; margin-bottom: 5px;" jhiTranslate="searchResult.details.hitDetails"></button>
                                <button type="button" class="btn btn-outline-secondary" style="display: block;" jhiTranslate="searchResult.details.allExercises"></button>

                            </div>

                            <div class="col-12 col-md-8">
                                <p style="text-align: left;"><strong jhiTranslate="searchResult.metadata.metadata"></strong></p>
                                <hr>
                                <p style="text-align: left;">Program Language: Java
                                    <br>Creator: Michael Breu
                                    <br>Last update: 26.11.2020
                                    <br>License: CCv2</p>
                                <a href="https://git-scm.com/" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: right;">Git</a>
                            </div>

                            <div class="col-6 col-md-4"></div>
                            <div class="col-12 col-md-8">
                                <p style="text-align: left;"><strong jhiTranslate="searchResult.export.export"></strong></p>
                                <hr>
                                <a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: left; margin-right: 5px; margin-top: 5px;" jhiTranslate="searchResult.export.artemis"></a>
                                <a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: left; margin-right: 5px; margin-top: 5px;" jhiTranslate="searchResult.export.latex"></a>
                                <a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: left; margin-right: 5px; margin-top: 5px;" jhiTranslate="searchResult.export.download"></a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" jhiTranslate="searchResult.close"></button>
                </div>

            </div>
        </div>
    </div> <!-- Modal end-->
</div>