<h1>Recently Added</h1>
<input type="checkbox" [(ngModel)]="groupTv" (click)="change()" />
<hr />
<p-calendar [(ngModel)]="range" showButtonBar="true" selectionMode="range" (onClose)="close()"></p-calendar>
<hr />
<style>
    .img-conatiner {
    position: relative;
    text-align: center;
    color: white;
}

/* Bottom left text */
.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

</style>
<ngu-carousel [inputs]="carouselTile">
            <ngu-tile NguCarouselItem *ngFor="let movie of movies">
                    <div class="img-container">
                            <img class="img-responsive poster" src="{{movie.posterPath}}" style="width: 300px" alt="poster">
                            <div class="bottom-left"> {{movie.title}}</div>
                        </div>
               
               
            </ngu-tile>

          <button NguCarouselPrev class='leftRs'><i class="fa fa-arrow-left"></i></button>
          <button NguCarouselNext class='rightRs'><i class="fa fa-arrow-right"></i></button>
    </ngu-carousel>



<hr/>

<ngu-carousel [inputs]="carouselTile">
        <ngu-tile NguCarouselItem *ngFor="let t of tv">
            <img class="img-responsive poster" src="{{t.posterPath}}" style="width: 300px" alt="poster">
            <b>{{t.title}}</b>
            <br>
            <b>Season: {{t.seasonNumber}}</b>
            <br>
            <b>Episode: {{t.episodeNumber}}</b>
        </ngu-tile>

      <button NguCarouselPrev class='leftRs'><i class="fa fa-arrow-left"></i></button>
      <button NguCarouselNext class='rightRs'><i class="fa fa-arrow-right"></i></button>
</ngu-carousel>
