I am trying to create the modal, which will load on page load in angular 6, its working fine on click method which will pass one argument

I tried with ngOnInit, but its void type not taking the argument

<ng-template #content let-c="close" let-d="dismiss">
        <div class="modal-header">
          <h4 class="modal-title" id="modal-basic-title">Select user</h4>
          <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
              <select >
                <option value="volvo">Rohait</option>
                <option value="saab">Anuj</option>
              </select>   
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
        </div>
      </ng-template>

Launch demo modal

that I running using this

open(content) {
      this.modalService.open(content);
     }

But its not working here, its working on click method

I am trying to create the modal, which will load on page load in angular 6, its working fine on click method which will pass one argument

I tried with ngOnInit, but its void type not taking the argument

<ng-template #content let-c="close" let-d="dismiss">
        <div class="modal-header">
          <h4 class="modal-title" id="modal-basic-title">Select user</h4>
          <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
              <select >
                <option value="volvo">Rohait</option>
                <option value="saab">Anuj</option>
              </select>   
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
        </div>
      </ng-template>

Launch demo modal

that I running using this

open(content) {
      this.modalService.open(content);
     }

But its not working here, its working on click method

• javascript
• angular

• You can take one approach like - after your ponent is intialized, you can make the open() work like <templateVariable>.nativeElement.click(). This will essentially click the button and inject your logic in the DOM – user6202450 Commented Jul 11, 2019 at 6:07

1 Answer 1

If you are using Angular 8, first, you can declare this.

@ViewChild('content', { static: true }) content: TemplateRef<any>;

However, for those who are using Angular 7 and below, you should use this instead.

@ViewChild('content') content: TemplateRef<any>;

The above will allow you to access the content template reference variable within your Class.

And on your ngOnInit,

ngOnInit() {
  this.modalService.open(this.content);
}

And do remember to import ViewChild, as well as TemplateRef into your ponent.ts,

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

This should allow your modalService to open the modal.