Using the API "https://jsonplaceholder.typicode.com/photos", I have access to 5 properties:
albumId: 1 id: 1 thumbnailUrl: "https://via.placeholder.com/150/92c952" title: "accusamus beatae ad facilis cum similique qui sunt" url: "https://via.placeholder.com/600/92c952"This API provides URLs for both Images and Thumbnails.
In one.component, I aim to display Albums with their Album Id on the First Page.
Upon clicking on a specific album, the Thumbnails of the Images (two.component) should be visible.
Furthermore, clicking on a thumbnail will open the Image in a pop-up gallery.
Sample Code Below
one.component.html
<div class="container">
<h5>Albums with corresponding AlbumIds will be displayed here in separate blocks.</h5>
<!-- Display albums serially based on their albumId -->
<h3 *ngFor=" " (click)="thumbnailOnClick()" routerLink="/two">albumID</h3>
</div>
one.component.ts
export class OneComponent implements OnInit {
constructor(private helperService:HelpService) { };
ngOnInit(){
this.getAlbumData();
};
apiAlbumData=[];//data from api is stored in it.
getAlbumData(){
this.helperService.getAlbums().subscribe(apiAlbumData=>{
console.log(apiAlbumData);
//looping through apiAlbumData in console
for(let value of this.apiAlbumData){
console.log(value);
}
})
}
}
helper.service
export class HelpService {
constructor(private http:HttpClient) { }
getAlbums():Observable<any>{
const url = 'https://jsonplaceholder.typicode.com/photos';
return this.http.get(url);
};
};