Angular application experiencing issues with opening snackbar notifications

I'm currently working on a user registration application in Angular. My goal is to notify the user upon successful account creation or if an error occurs. I've been attempting to use a snackbar for this purpose, but it's not working as expected. Although I added an alert to check if I'm entering the function, the snackbar notification remains elusive. Any assistance would be greatly appreciated.

Here is the TypeScript code I'm using:

export class AdduserComponent implements OnInit {


  constructor(private formBuilder:FormBuilder,private userService:UsersService,private router:Router,private snackBar: MatSnackBar) { }
  addForm: FormGroup;
  selected = 'option2';
  passwordsMatcher = new RepeatPasswordEStateMatcher;

  ngOnInit()
  {

    this.addForm = this.formBuilder.group({
      id: [],
      userName: ['', Validators.required],
      password:new FormControl( '',[ Validators.required]),
      passwordAgain: new FormControl('',[ Validators.required]),
      userRole:['',Validators.required],

    },{ validator: RepeatPasswordValidator });
  }
  onSubmit() {
    if (this.addForm.valid)
    {
    this.userService.createUser(this.addForm.value)
      .subscribe( data => {
       console.log(data);
       alert("User created");
        //this.router.navigate(['adduser']);
      },error=>
      {console.log(error)
        alert("Username already exists, please choose a different one.");
        this.snackBar.open("message", "action", {
          duration: 2000,
        });
        this.addForm.controls.userName.reset();

      });


  }

Answer №1

Successfully resolved the issue by identifying that the alert was overlapping with the snackbar. By removing the alert, the visibility of the snackbar has been restored.

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

Some elements that fit the criteria of 'number | function' are not callable at all

Consider a basic function like this: export const sum = (num?: number) => { const adder = (n: number) => { if (!n) { return num; } num = (num && num + n) || n; return adder; }; return a ...

Single instance property binding for Angular

I am looking for a solution to set the checked attribute of a checkbox only once, based on whether the current object is in an array. I want this check to happen during initial render and not rely on change detection. <input type="checkbox" [c ...

Using Angular 6 shortcodes in HTML

Is there a way to save an element in HTML as an alias for repeated use in Angular 6 without using *ngIf directive? For instance, consider the following code snippet: <dumb-comp [name]="(someObservable | async).name" [role]="(someObservable | a ...

Upon selecting an option in the mat-select element, the form does not update its pristine state to

I recently encountered an issue with my Angular Material mat-select form. I am populating the options from an observable and setting the selected item value programmatically, which is working fine. However, I faced a problem where I expected changing the m ...

Sending information to the styles feature in Angular 2

Is there a way to transfer data from an Angular tag to the styles in the @Component? Take a look at my component: import { Component, Input } from '@angular/core'; @Component({ selector: 'icon', template: `<svg class="icon"> ...

Utilizing CDK to transfer files to S3 storage bucket

I've been trying to upload a file to an S3 bucket created using CDK, but I keep encountering the same error even when using AWS's example code. Here is the stack: export class TestStack extends cdk.Stack { public readonly response: string; ...

What is the recommended approach for storing and retrieving images in the Angular 5 framework?

I have an Angular 5 app that utilizes Java rest services. The Java application stores images in a folder located outside of the Java app itself. Now, my goal is for the Angular app to be able to read these images. Although it makes sense to store them outs ...

Tips and tricks for accessing the state tree within effects in @ngrx/effects 2.x

I am currently in the process of migrating my code from version 1.x to 2.x of @ngrx/effects. Previously, in version 1.x, I was able to access the state tree directly within an effect: constructor(private updates$: StateUpdates<AppState>) {} @E ...

What are the appropriate scenarios to utilize the declare keyword in TypeScript?

What is the necessity of using declare in TypeScript for declaring variables and functions, and when is it not required? For instance, why use declare var foo: number; when let foo: number; seems to achieve the same result (declaring a variable named ...

Executing multiple service calls in Angular2

Is there a way to optimize the number of requests made to a service? I need to retrieve data from my database in batches of 1000 entries each time. Currently, I have a loop set up like this: while (!done) { ... } This approach results in unnecessary re ...

What is the meaning of '=>' in typescript/javascript?

I keep coming across lots of '=>' in the code I found on the internet. Could someone please explain it to me as if I were 5 years old? (I'm searching for the specific code, and I'll share it here once I locate it).. Found it: ...

Strange Appearance of Angular Material Slider

I am experiencing some issues with my slider and I'm not exactly sure what's causing them. [] .big-container { display: block; padding-left: 10px; padding-right: 10px; padding-top: 10px; margin-bottom: 10px; } .question { display ...

Angular routes can cause object attributes to become undefined

I am new to Angular and struggling with an issue. Despite reading numerous similar questions and answers related to AJAX, async programming, my problem remains unsolved. When I click on the 'Details' button to view product details, the routing wo ...

A technique for adding a border to a Mat Card that mimics the outline of a Mat Form Field within a custom

I am faced with a unique design challenge where I am utilizing the MatCardComponent and each card contains a table. I would like to incorporate a floating label within the border gap similar to what is seen in MatFormField. https://i.stack.imgur.com/51LBj ...

Dependencies for Angular2 Material components on npm

I currently have the following dependencies listed in my package.json for npm to locate and install. "@angular/material": "2.0.0-beta.1" "angular-material": "^1.1.1" If I want to utilize the most up-to-date versions, what exactly should I specify? I am s ...

NGRX refresh does not result in any successful actions

Having an issue with loading users into a mat-selection-list within a form. Everything works fine the first time, but upon page refresh, the selector returns 'undefined'. Initially, both GET_USERS and GET_USERS_SUCCESS are triggered (console log ...

Are 'const' and 'let' interchangeable in Typescript?

Exploring AngularJS 2 and Typescript led me to create something using these technologies as a way to grasp the basics of Typescript. Through various sources, I delved into modules, Typescript concepts, with one particularly interesting topic discussing the ...

Using React-Router-Native to send an image as a parameter

I am encountering an issue while attempting to pass an image as a parameter in react-router-native and retrieve the data from location.state. Typically, I use the following code to display an image: import Icon from '../image/icon.png'; <Vie ...

Encountered an error while attempting to update an object: Unable to read property 'push' of undefined

Encountering an issue while attempting to update an object with additional information, receiving an error message stating 'property \'push\' of undefined'. /*Below is the object model in question:*/ export class Students { ...

The PWA application is experiencing crashes on Safari following the recent IOS 17 update

Recently, I encountered an issue with my Angular app functioning as a PWA on my iPhone. Everything was working smoothly until the latest iOS 17 update. Now, the app crashes frequently and even when I clear the cache on Safari, it only works for a few min ...