Angular playing api data

Hello to all, welcome again on therichpost.com. In this post, I will tell you, Angular 8 enlarge image in custom bootstrap modal.

This example is with my own thought and may be it will be helpful to someone.

Angular 8 enlarge image in custom bootstrap modal
Angular 8 enlarge image in custom bootstrap modal

Here is the complete working steps and please do it very carefully:

1. Here are the basics commands to install angular 8 on your system:

npm install -g @angular/cli 

ng new angularpopup //Create new Angular Project

$ cd angularpopup // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

 

2. After done with above, you need to run below commands to set bootstrap environment into your angular 8 application:

npm install --save bootstrap

 

3. Now you need to add below code into your angular.json file:

...
"styles": [
              "src/styles.css",
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
...

 

4. Now you need to add below code into your src/app/app.component.ts file:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angulartoastr';
  showModal: boolean;
  show()
  {
    this.showModal = true; // Show-Hide Modal Check
    
  }
  //Bootstrap Modal Close event
  hide()
  {
    this.showModal = false;
  }

  
}

 

5. Now you need to add below code into src/app/app.component.html file:

<a href="#" (click) = "show()">
  <img id="imageresource" src="https://therichpost.com/wp-content/uploads/2019/09/Angular-8-custom-accordion-working-example-364x225.png" style="width: 125px; height: 125px;">
  Click to Enlarge
</a>
<!-- Creates the bootstrap modal where the image will appear -->
<div [style.display]="showModal ? 'block' : 'none'" class="modal" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title" id="myModalLabel">Image preview</h4>
    </div>
    <div class="modal-body">
      <img src="https://therichpost.com/wp-content/uploads/2019/09/Angular-8-custom-accordion-working-example-364x225.png" id="imagepreview" style="width: 425px; height: 425px;" >
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" (click) = "hide()">Close</button>
    </div>
  </div>
</div>
</div>

 

In the end please run ng serve command to taste the output. If you have any query then please comment below.

Jassa

Thank you

By therichpost

Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 19, MedusaJs, Next.js, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

5 thoughts on “Angular 8 enlarge image in custom bootstrap modal”
  1. Hi, it’s very good, thanks you

    I have a problem, I try to use the modal on a ngfor
    in “mydata” I have 2 images, but it always displays my image 2 in the modal when I click on image 1 and 2.

    Have you got an idea please ?

    {{mydata.id}}

    Image {{mydata.id}}
    Close

  2. Hi, for this you can use jquery trick $(this) onclick function. First you can get the image src ans paste same image src inside model image src with you can get the same image inside modal.

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.