CODEWITHSUNDEEP
angularangularjs-directiveallow-modals
rajesh
rajesh

Reputation: 21

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

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)

Upvotes: 2

Views: 6766

Answers (3)

Barremian
Barremian

Reputation: 31125

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.

Upvotes: 1

Jatin Parmar
Jatin Parmar

Reputation: 99

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);

Upvotes: 0

PushpikaWan
PushpikaWan

Reputation: 2545

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

Upvotes: 0

Related Questions