Modal in Angular6

Question

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.

Answer 1

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 []).

Answer 2

@Sujata Chanda . Thank you very much. I was able to find out the issue. So by default the modal gets loaded even when we specify the autostart param as false. So one has to just enable the modal on click. This is the same anwer as provided by @Sujatha. Little modified to give more control over the method

 <ngx-smart-modal  #myModal
   identifier="myModal"  autostart="false">
   <h1>Title</h1>
   <p>Some stuff...</p>

Now when autostart option is specified in the view, by default it is taken as true no matter what value we pass in. This happens atleast in angular6. So remove the specification there and just bind the ngx-smart-modal to an action like this

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

Now in the component you can open the modal

openModal(event){
  console.log('opne modal clicked', event.target, '--');
  this.smartModalService.getModal('myModal').toggle();
  // this force the modal to be opened even if clicked outside .User has to 
  press cancel button or close
  this.smartModalService.getModal('myModal').escapable=false;
  this.smartModalService.getModal('myModal').dismissable =false;
  this.smartModalService.getModal('myModal').closable =false;
  this.smartModalService.getModal('myModal').hideDelay = 7;
}