How can i open a modal in angular 7 without using a button click,

Question

How can i open a modal in angular 7 without using a button click. i need to open a modal when i get a response from one of the API without using a button click. i am new to angular. My HTML :

<ng-template #Qpaper let-c="close" let-d="dismiss">        
<div class="modal-header text-white" >
  <div class="modal-title " id="modal-basic-title" >
    <h4>Draft  Selected Question</h4>
  </div>
  <button type="button" class="close text-white" aria-label="Close" (click)="d('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body  p-0">
   <p>q paper preview </p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="d('Cross click')">Cancel</button>
</div> 

I have tried folling codes to trigger modal event :

this.modalService.open('Qpaper');
this.modalService.open(data.response , Qpaper)

Answer 1

you can see this example https://stackblitz.com/edit/angular-modal-service?file=app%2Fapp.component.ts

Then call onCreateModal() in AppComponent without button click u can open modal

Answer 2

You need to use View Child and get the reference from the template.

@ViewChild('Qpaper') private qpaper;

Don't forget to import ViewChild.

import { ViewChild } from '@angular/core';

finally you can then simply do this

this.modalService.open(qpaper);

Answer 3

You could wrap the modal in it's own component.

my-modal.component.ts

import { Component, OnInit, Input } from '@angular/core';

import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-my-modal',
  templateUrl: './my-modal.component.html',
  styleUrls: ['./my-modal.component.css']
})
export class MyModalComponent implements OnInit {
  @Input() response: any;

  constructor() { }

  ngOnInit() {
  }
}

my-modal.component.html

<div class="modal-header text-white" >
  <div class="modal-title " id="modal-basic-title" >
    <h4>Draft  Selected Question</h4>
  </div>    
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body  p-0">
   <p>q paper preview </p>
   <p class="card-text">ID: {{ response.id }}</p>
   <p class="card-text">Title: {{ response.title }}</p>
   <p class="card-text">Value: {{ response.value }}</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="activeModal.close('Close click')">Cancel</button>
</div>

Then it can be imported in the parent component and opened as per requirement. In your case on a valid response from a API request.

Parent component

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { MyModalComponent } from './my-modal/my-modal.component';

export class AppComponent implements OnInit {
  constructor(private modalService: NgbModal) { }

  ngOnInit() {
    this._apiService.getDetails().subscribe(
      response => {
        this.openMyModal(response);
      },
      error => {
        console.error('Unable to retrieve data from API: ', e);
      }
    );
  }

  openMyModal(response: any) {
    const modalRef = this.modalService.open(MyModalComponent);
    modalRef.componentInstance.response = response;
  }
}

Then call openMyModal() function when you receive the valid response from the API request.

One advantage of this approach is, as with any other component, it allows you to open as many modals as you need in the parent component.