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.

Not able to reproduce in this example: https://stackblitz.com/edit/ngx-smart-modal-example-nhsdbr?file=app/app.module.ts — Sujata Chanda, Aug 16 '18 at 09:37
That is very strange. Let me rewrite the entire component. I am unable to find where that error occured in my component. Thank you though. But I see that the angular version used is 4. Mine is 6. Could that be an issue? Maybe I will try that out and let you know — vijayakumarpsg587, Aug 16 '18 at 11:53

score 0 · Answer 1 · answered Aug 16 '18 at 12:06

@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;
}

Maxime Lafarie · Accepted Answer · 2018-09-10T13:14:01.180

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

Modal in Angular6

2 Answers2