Html - Modal window disappears after redirect. Angular

AlexandrBoroshenko
October 16, 2023
198 views
0 votes
2 Answers

I need your help. I have a modal that I’m trying to show right after login. My effect and code inside ngOnInit only fire once, after I’ve logged in. This code is not working correctly for me, because my condition for showing the modal window is true, but immediately after showing my modal, a redirect happens, regarding the conditions in the effect, and the modal window immediately disappears. Please tell me where the error is in the code? Why does my modal disappear after a redirect and how to fix it? Thank you very much

html

<modalSlideUp [isModalShow]="modalIsShown">
 <form [formGroup]="form">
      <input type="checkbox" formControlName="stayInTheSystem">
      <h4> Don`t ask me again </h4>
      <button> Yes </button>
      <button> No </button>
 </form>
</modalSlideUp>

typescript

 _modalIsShown: boolean = false;

 get modalIsShown(): boolean {
   return this._modalIsShown;
 }

 set modalIsShown(value: boolean) {
   console.log(value, 'value in setter'); // true
   this._modalIsShown = true;
 }


ngOnInit() {
   this.effects.AuthenticationSuccess.subscribe((data) => 
     let isModalShow: boolean =
      (
        this.tokenService.getUserSavedIsa(this.user?.id) === true ||
        localStorage.getItem('userRecords') === null ||
        localStorage.getItem('dontAskAgain') === 'false'
      );
      this.modalIsShown = isModalShow;
      setTimeout(() => {
         console.log(this.isTokenModalWindowOpened, 'timeout'); // true
       }, 5000)
   })

}

effects

AuthenticationSuccess: Observable<any> = createEffect(() => this.actions$.pipe(
  ofType(idenityActions.ActionTypes.AUTHENICATION_SUCCESS),
  tap((user:any) => {

    const savedUrl = localStorage.getItem('intendedUrl');

      if (!(user.payload as AuthenticateResponseModel).isAuthenticated) {
        this.router.navigateByUrl("/non-activate", { skipLocationChange: false });
      } else if (!savedUrl && user.payload.firstSetup === false) {
        this.router.navigateByUrl("/");
      } else if (savedUrl && user.payload.firstSetup === false) {
        this.router.navigateByUrl(savedUrl);
        setTimeout(() => {
          localStorage.removeItem('savedUrl');
        }, 3000)
      } else if (savedUrl && user.payload.firstSetup === true) {
        this.router.navigateByUrl('/my-profile/settings');
      }

  })
),{ dispatch: false });

Answers

you need to keep eye on whether the redirect has occurred or not.
try this and let me know.

  _modalIsShown: boolean = false;
    _redirectOccurred: boolean = false;
    
    get modalIsShown(): boolean {
      return this._modalIsShown;
    }
    
    set modalIsShown(value: boolean) {
      console.log(value, 'value in setter'); // true
      this._modalIsShown = value;
    }
    
    ngOnInit() {
      this.effects.AuthenticationSuccess.subscribe((data) => {
        if (!this._redirectOccurred) {
          let isModalShow: boolean =
            (
              this.tokenService.getUserSavedIsa(this.user?.id) === true ||
              localStorage.getItem('userRecords') === null ||
              localStorage.getItem('dontAskAgain') === 'false'
            );
          this.modalIsShown = isModalShow;
          setTimeout(() => {
            console.log(this.isTokenModalWindowOpened, 'timeout'); // true
          }, 5000);
        }
      });
    
      // Set the redirect occurred flag to true after the modal is shown
      this.effects.Redirect.subscribe(() => {
        this._redirectOccurred = true;
      });
    }

You might want to leverage Router.events to listen for navigation events and handle the modal visibility accordingly.

For instance, adjust your component to listen for NavigationEnd events and make sure the modal is shown prior to any navigation occurring:

import { Router, NavigationEnd } from '@angular/router';

// existing code

export class YourComponent implements OnInit {

  _modalIsShown: boolean = false;
  _navigationEnded: boolean = false;

  get modalIsShown(): boolean {
    return this._modalIsShown;
  }

  set modalIsShown(value: boolean) {
    console.log(value, 'value in setter'); // true
    this._modalIsShown = value;
  }

  constructor(private router: Router, private effects: YourEffects, private tokenService: TokenService) {
    // Listen for navigation end events
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this._navigationEnded = true;
        if (this._modalIsShown) {
          // handle modal closure or other actions here
        }
      }
    });
  }

  ngOnInit() {
    this.effects.AuthenticationSuccess.subscribe((data) => {
      if (!this._navigationEnded) {
        let isModalShow: boolean =
          (
            this.tokenService.getUserSavedIsa(this.user?.id) === true ||
            localStorage.getItem('userRecords') === null ||
            localStorage.getItem('dontAskAgain') === 'false'
          );
        this.modalIsShown = isModalShow;
        setTimeout(() => {
          console.log(this.isTokenModalWindowOpened, 'timeout'); // true
        }, 5000);
      }
    });
  }
}

Router and NavigationEnd come from @angular/router.
Inside the constructor, you can subscribe to router.events to listen for instances of NavigationEnd, setting _navigationEnded to true when navigation ends. This flag helps to track whether navigation has ended.
Inside ngOnInit, check _navigationEnded to decide whether or not to show the modal. If navigation has ended, you can assume that the modal should not be shown.

If needed, other actions can be taken within the router.events.subscribe block to manage the modal’s visibility or other behavior when navigation occurs.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Modal window disappears after redirect. Angular

Answers