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