angularmodal-dialogngx-modal

Modal in Angular6


I am trying to use ngx-smart-modal in my Angular app to display a modal on click. The issue that I am currently facing is that once the component view is loaded, the modal gets displayed on load.

In the documentation, it is specified to give "autostart" =false to not load the modal on the component's initialization, but that does not seem to work

Here is my template view

 <!-- Trigger/Open The Modal -->

 <button id="myBtn" class="btn btn-primary"  
 (click)="openModal($event)" >Open Modal</button>

  <ngx-smart-modal  #myModal (onOpen)="modalOpened($event)"
       identifier="myModal"  autostart="false">
       <h1>Title</h1>
       <p>Some stuff...</p>
       <button (click)="closeEvent($event)">Close</button>
  </ngx-smart-modal>

I am unable to get a handler in the constructor or ngOnit lifecycle hooks and only able to get a handler in the ngAfterViewInit() and by that time the modal gets loaded.

ngAfterViewInit(){
this.smartModalService.get('myModal').close();
  console.log('after view modalstack' 
  ,this.smartModalService.get('myModal').autostart);
}

The console log gives me false, but yet the modal gets shown on load. I tried a hack to close it in the after view init hook but still there is a delay of a second in closing the modal window on load and that can be seen.

Any help from you guys is greatly appreciated.


Solution

  • You don't need to do all that kind of code to avoid autostart, your issue is more a template binding issue.

    You're passing the autostart option without [...] so the value that you try to pass to the component is a string and is interpreted as true.

    By default, the [autostart] option is false, so you don't need to pass it. All is already explained in the library README.

    As said in the README, it awaits a boolean value so you have to pass it like: [autostart]="false" (notice the []).