showing pop-up notification in Angular

I am utilizing the ngx-alert service to show an error message if the supplied credentials do not match any user account in my database.

This is my current process:

if (this.check.data.length == 0) {
      this.alert.danger('User does not exist');

        this.userForm.reset()
      }

      else {
       this.alert.success('You will be directed to another page shortly');
        sessionStorage.setItem('user',this.check.data[0].username);
       setTimeout(this.router.navigate(['/home',{data:  'ok'}] ), 3000)
      }

Even though the error message appears when the user exists, there seems to be a problem with the redirection after using router.navigate. I am encountering the following error:

error

I am puzzled by this error; I can't seem to identify where I am invoking the Object()

Thank you for your assistance

angularalert

Answer №1

It appears that this statement is inaccurate 

  setTimeout(this.router.navigate(['/home',{data:  'ok'}] ), 3000)

Try using it in this way: 

setTimeout(()=> {this.router.navigate(['/home',{data:  'ok'}] )}, 3000)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What sets template-driven and reactive forms apart in practice?

Exploring the Angular2 new Forms API has revealed two distinct approaches to forms: Template driven and reactive (model-driven) forms. I am curious about the real-world differences between these two methods, beyond just syntax. Which approach is more adva ...

angularangular2-forms

Struggling with making `http.get` function properly in Angular 2

Attempting to execute a basic GET request using Http in Angular 2, following guidance from this TUTORIAL and other current resources. Upon successfully injecting the http component, the following code was implemented constructor(@Inject(Http) /* remove ...

angular

Connect store variables to components using Angular's ngrx

I am attempting to link the location variable in my component to another variable in the store using a selector with ngrx v13 in Angular. However, when I include the variable with the property in the HTML, I encounter an error: Error message: Property &ap ...

angularngrxngrx-storeangular-ngrx-dataangular13

The two-way binding does not connect the property and event halves to the same target

I am trying to create a two-way binding using reactive forms in Angular. I need to exchange data between the child component and the parent component seamlessly. This is the HTML code for my child component: <input type="text" #name class=&qu ...

angulartypescriptangular-reactive-forms

Angularfire2: Access Denied Error When User Logs Out

When utilizing the following method: login() { this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()) .then(() => { this.router.navigate(['']); }); } An error occurs during logout: zone.js:915 Unca ...

javascriptangularfirebasefirebase-authenticationangularfire2

Learn how to easily reset the index value within the same template in Angular

In my template, I have 3 tables with the same JSON data as their parent elements. <tbody> <ng-container *ngFor="let row of reportingData.RecommendationData; let i=index"> <tr *ngIf="row.swRecommendations"> <td& ...

htmlangularhtml-table

Dynamic Styling in Angular 2/4: A Modern Approach

Can someone help me with Angular 2/4 syntax for this code snippet? $('nav ul li a').click(() => { $(this).closest('li').addClass('active'); }); ...

jqueryangular

Using Angular 2, you can pass an object as a parameter to a function

Is there a way to pass an object as a parameter in the DOM on this forum? Within my HTML code, I have the following: <div class="list-items"> <ul> <li *ngFor="let i of item"> <span (click)="onAdd({{newUser.us ...

typescriptangular

Is there a way to adjust the StatusBar color or make it transparent on Android when working with NativeScript and Angular?

I am having trouble changing the StatusBar color in my NativeScript with Angular project. It currently appears as translucent black, darkening the background behind it. I want to either make it transparent or match the background color of the page. What I ...

androidangularnativescriptstatusbartransparent

Is it possible for an Interface's property to be a type that contains an array?

As I dive into the Angular code, I encountered a peculiar type for a property within an Interface named 'Origin' that has left me perplexed. Here's the snippet: export interface Origin { areaNum?: number; open?: { [key: stri ...

angulartypescripttypescript-typings

Rearranging lists in JHipster: What is the best way to do it?

Seeking advice and guidance on implementing a drag-and-drop reorderable list in JHipster 6.7.1. To illustrate, picture creating a custom ordered list of objects where users can add, remove, and rearrange items. For instance, wanting to move [Epsilon] betw ...

angulardrag-and-dropjhipster

Exploring Heroes in Angular 2: Retrieving Object Information by Clicking on <li> Items

Currently, I am delving into the documentation for an angular 4 project called "Tour of Heroes" which can be found at https://angular.io/docs/ts/latest/tutorial/toh-pt2.html. <li *ngFor="let hero of heroes" (click)="onSelect(hero)">{{hero.name}}< ...

javascriptangulartypescript

Guide on how to duplicate a form upon clicking an "add" link in Angular 2

Is it possible to dynamically repeat a form in Angular2 when clicking on a link? I am looking for a way to add the same form below the previous one when a specific link is clicked. Any suggestions or immediate replies would be greatly appreciated. For ins ...

formsangular

Creating a jQuery alert similar to Stack Overflow's and integrating it with server-side functionality

I recently asked a question but unfortunately couldn't find the answer I was looking for. I came across this discussion on Stack Overflow about creating an alert box with dynamic data, but it wasn't exactly what I needed. After searching online ...

javascriptjqueryasp.netalertstack-overflow

Exploring the creation of an Angular service that utilizes HttpClient for making GET requests, with a focus on the different

I've been diving into Angular lately and I'm facing some challenges with handling get requests. If you're interested, you can check out my code on Angular Stackblitz import { HttpClient} from '@angular/common/http'; import { Inject ...

angulartypescripthttpclientangular-httpclient

Make the text in the SCSS file placeholder bold

Within my Angular front end application, there is a form containing a textarea: <mat-form-field class="full-width"> <textarea class="left-aligned" formcontrolname="x1" matInput placeholder="some text"/> </mat-form-field> In the co ...

cssangularhtml

Benefits of Angular Signals - Why is it advantageous?

I'm grappling with the concept of Angular Signals and their benefits. While many examples demonstrate counting, I'm curious about why signals are preferable to using variables like myCount and myCountDouble as shown below? Check out my code on S ...

angularsignalsangular-signals

How to generate an array within a TypeScript extension function

As I was working on creating an extension method using typeScript, the main goal was to establish a static or normal variable within the method. The ServiceCollector method was invoked three times in order to send and store data or objects in an array. B ...

angulartypescript

How to Implement Modal Popups on Click in Angular with the AmCharts XY Chart

Our goal is to display a modal window when users click on a data point. The current code we are using is as follows: constructor(public dataservice: DataserviceService, private modalService: NgbModal, private router: Router) { } ... ... bullet.events.on( ...

angularamchartsamcharts4

finding the adjacent li element using the document.(property)

Utilizing a pub/sub solution named ably.io for real-time data updates, I have implemented a method that assigns dynamic ids to each ngFor listing. This allows me to easily identify and update the values received from ably.io subscribe. document.getElement ...

angulartypescript