angular - How to display a Image inside a Bootstrap Modal from the GET random photo API call from Unsplash

Question

I'm still a beginner in Angular 11 and Bootstrap but so far I managed to display random photos using GET /photos/random from Unsplash API. I wanted to use the view button inside the card to view the photo in a large size but using a modal but I'm not sure how to. Any help would be appreciated Thanks!

Some snapshot to give a bit of insights: AppSnapshot1AppSnapshot2DeveloperToolsSnapshot

Here's what i've done so far: unsplash.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
@Injectable({
  providedIn: 'root'
})

export class UnsplashService {

  constructor(private http: HttpClient) {
  }

  getImages<T>(): Observable<T> {
return this.http.get<T>('https://api.unsplash.com./photos/random?client_id="MY_CLIENT_ID"&count=30');
  }

  // not sure if i really need to get a specific observable to get a specific photo
  // getThatOnePhoto<T>(): Observable<T> {
  //   return this.http.get<T>('https://api.unsplash.com./photos/');
  // }
}

main.component.ts

import { UnsplashService } from './../unsplash.service';
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})

export class MainComponent implements OnInit {

  images: any;
  ModalTitle: string;
  ActivateViewPhoto: boolean = false;
  img: any;

  constructor(private unsplashService: UnsplashService) { }

  ngOnInit() {
    this.unsplashService.getImages().subscribe(
      (images) => {
        this.images = images;
        console.log(this.images);
        console.log('hello there! You just successfully made a GET API call');
      },
      (error) => {
        console.log(error);
      }
    );
  }

  viewPhoto(item) {
    this.ModalTitle = 'View Photo';
    this.ActivateViewPhoto = true;
    this.img = item;
  }
  closeClick() {
    this.ActivateViewPhoto = false;
  }
}

main.component.html

<section class="py-5 text-center container">
  <div class="row py-lg-5">
    <div class="col-lg-6 col-md-8 mx-auto">
      <h1 class="fw-light">Album example using Unsplash API</h1>
      <p class="lead text-muted">
        Tilde keffiyeh whatever hot chicken subway tile id mlkshk church-key
        single-origin coffee est health goth williamsburg venmo cred. Unicorn
        gentrify vexillologist eu.
      </p>
      <p>
        <a href="#" class="btn btn-primary my-2">Main call to action</a>
        <a href="#" class="btn btn-secondary my-2">Secondary action</a>
      </p>
    </div>
  </div>
</section>
<main>
  <div class="album py-5 bg-light">
    <div class="container">
      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
        <div *ngFor="let image of images">
          <div class="col">
            <div class="card shadow-sm">
              <picture class="bd-placeholder-img card-img-top">
                <!-- random images below this tag! 
                                |
                                |
                                V
                -->
                <img
                  class="THE_IMAGE"
                  src="{{ image.urls.small }}"
                  alt="random photos from unsplash"
                  width="100%"
                  height="225"
                />
              </picture>
              <div class="card-body">
                <p class="card-text">{{ image.alt_description }}</p>
                <div class="d-flex justify-content-between align-items-center">
                  <div class="btn-group">
                    <button
                      type="button"
                      class="btn btn-sm btn-outline-secondary"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal"
                      (click)="viewPhoto(image)"
                    >
                      view photo
                    </button>
                  </div>
                  <!--<small class="text-muted">9 mins</small>-->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
<!--Modal-->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
  data-bs-backdrop="static"
  data-bs-keyboard="false">

  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{ ModalTitle }}</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
          (click)="closeClick()"
        ></button>
      </div>
      <div class="modal-body">
        <app-enlarge-photo> </app-enlarge-photo>
        <!-- <app-enlarge-photo [img] = "img" *ngIf="ActivateViewPhoto"> </app-enlarge-photo> -->
      </div>
    </div>
  </div>
</div>

enlarge-photo.component.ts

import { Component, OnInit } from '@angular/core';
import { UnsplashService } from './../unsplash.service';
@Component({
  selector: 'app-enlarge-photo',
  templateUrl: './enlarge-photo.component.html',
  styleUrls: ['./enlarge-photo.component.css']
})
export class EnlargePhotoComponent implements OnInit {
  constructor(private unsplashService: UnsplashService) { }
  ngOnInit(): void {
  }
}

question from:https://stackoverflow.com/questions/66064328/how-to-display-a-image-inside-a-bootstrap-modal-from-the-get-random-photo-api-ca

Answer 1

Waitting for answers