I recently completed a project in Angular that utilizes the TMDB API. The project is nearly finalized, but I have a desire to implement a change where the background image (backdrop_path) and other elements shift each time the browser is reloaded. Currently, this data is being manually fetched from the TMDB API. Thank you.
Service *****
getComedy(): Observable<Movies> {
return this.http.get<Movies>(`${this.url}${endpoint.comedy}`, { params } )
}Component HEADER ****
<div class="header__banner" [ngStyle]="{'background' : 'url(' + headerBGUrl + ')'}">
<div class="featured--horizontal">
<div class="featured--vertical"></div>
</div>
<div class="info">
<div class="title">
<h2>{{ comedy.results[5].title }}</h2>
<span class="points">Nota: </span>
<span class="points">{{ comedy.results[5].popularity | number:'1.1-1'}}</span>
<span>{{ comedy.results[5].release_date | date:'yyyy' }}</span>
</div>
<p>{{ comedy.results[5].overview }}</p>
<div class="info-btns">
<button class="watchButton">► Assistir</button>
<button class="listButton">+ Minha Lista</button>
</div>
</div>
</div>
****
Component Header Typescript *****
subs: Subscription[] = []
sticky!: boolean;
comedy!: Movies;
@ViewChild('stickHeader') header!: ElementRef;
headerBGUrl!: any;
constructor(public movies: ServiceApiService) { }
ngOnInit(): void {
this.subs.push(this.movies.getComedy().subscribe(data => {
this.comedy = data;
this.headerBGUrl = 'https://image.tmdb.org/t/p/original' + this.comedy.results[5].backdrop_path;
}));
}