title: Opening modal using NGX and state management
body: <p>I'd like to use NGXS to open modal which will set column visibility for datatable.</p>
  
  <p>Here is my code: </p>
  
  <p>state.ts file:</p>
  
  <pre><code>@Action(OpenColumnModal)
  openColumnModal(ctx: StateContext&lt;FeedStateModel&gt;) {
      const state = ctx.getState();
      const allCols = state.allColumns;
      return this.modalService.openColumnVisibilityModal(allCols).pipe(tap((result) =&gt; {
          ctx.setState({
              ...state,
              allColumns: result,
              userColumns: result.filter(col =&gt; col.visible)
          });
      })
  }
  </code></pre>
  
  <p>modal.service.ts:</p>
  
  <pre><code>openColumnVisibilityModal(columns): Observable&lt;any&gt; {
      const dialogRef = this.dialog.open(ColumnVisibilityModal, {
          data: columns,
          autoFocus: false,
          hasBackdrop: true,
          disableClose: true
      });
  
      return dialogRef.afterClosed();
  }
  </code></pre>
  
  <p>When I'm using modal opened by NGXS, after closing the state event isn't emitted. After that, I need to click somewhere to call the callback function inside openColumnModal function.</p>
  
  <p>I'm using Angular Material dialog.</p>
  
  <p>Does anyone know how to call callback function automatically after closing modal? </p>
  
  <p>Thanks in advance:)</p>