officeEpisodes.component.html

<div class="bg-gray-100 bg-cover">
    <div>
        <navbar></navbar>
    </div>
    <h1 class="font large text-gray-700 text-4xl mb-10 text-center font-bold uppercase">The Office Episodes</h1>
    <br>
        <div class="grid grid-cols-3">
            <div *ngFor = "let officeEpisode of webService.episodes_list | async" class='flex'>
                <div style="margin: auto; cursor: pointer;" [routerLink]="['/officeEpisode', officeEpisode._id]">
                        <img src={{officeEpisode.image.medium}} class="h-48">
                    <div class='text-center'>
                        {{officeEpisode.name}}
                    </div>
                    <div class='text-center mb-4'>
                        Season
                        {{officeEpisode.season}} -
                        Episode
                        {{officeEpisode.number}}
                    </div>
                </div>
            </div>
        </div>
            <div class='grid grid-cols-2'>
                <div class='flex flex-col items-center mt-12'>
                    <button class='bottom-2 left-2 bg-red-500 hover:bg-red-400 text-black font-bold py-2 px-4 border-b-4 ' (click)='previousPage()'>
                        Previous
                    </button>
                </div>
                <div class='flex flex-col items-center mt-12'>
                    <button class='bottom-2 right-2 bg-red-500 hover:bg-red-400 text-black font-bold py-2 px-4 border-b-4 ' (click)='nextPage()'>
                        Next
                    </button>
                </div>
            </div>
            <footer></footer>
</div>