CODEWITHSUNDEEP
angularangular12
Miguel Moura
Miguel Moura

Reputation: 39524

Display Messages in Angular Application

On an Angular 12 application I have a Sign Up component:

export class SignUpComponent implements OnInit {

  form: FormGroup;

  constructor(private formBuilder: FormBuilder, private userService: UserService) { 

    this.form = this.formBuilder.group({ 
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]],
    });

  }

  signUp() {

    if (this.form.valid) {

      this.userService.signUp({email: this.form.value.email, this.form.value.password).subscribe(
        
        (next) => { 
          
        },

        (error) => {
          new FormGroupErrorBuilder(this.form).setErrors(error.error.errors);
        },

      );
    } 
  }    
}

If the form submission succeeds I need to show a message. Should I:

  1. Hide the form and show an HTML element with the message? I would use a Boolean variable to hide one and show the other?

  2. Should I create a Message Component just to show messages? In the component I would have a code for each message in my APP. When SignUp form completes I would redirect to Message Component's Route passing the Message Code to show the correct message?

  3. Other approach?

Upvotes: 1

Views: 5684

Answers (4)

AyobKafrashian
AyobKafrashian

Reputation: 29

To compare the numbers of two numeric arrays with each other, you can do the following :

 int[] id1 = { 1,2,3,4,5,6};
       int[] id2 = { 1,5,4,3,2,6};

        for (var i = 0; i < id1.Count(); i++)
        {
            if (id1[i] != id2[i])
            {
               //Your Code
            }
        }

Upvotes: 0

Salahuddin Ahmed
Salahuddin Ahmed

Reputation: 5658

Better you follow the below steps and get a more convenient approach of displaying messages.

Install ngx-toastr and @angular/animations npm packages like this:

npm i ngx-toastr --save
npm i @angular/animations --save

Now, you need to include toastr css in angular.json file like this:

"styles": [
      "node_modules/ngx-toastr/toastr.css",
      "src/styles.css"
    ],

Now, you need to import ToastrModule and BrowserAnimationsModule to app.module.ts file like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';      
import { AppComponent } from './app.component';

import { SignUpComponent } from './user/signup.component';    
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
  
@NgModule({
  declarations: [
    AppComponent,
    SignUpComponent 
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, create a service component (notification.service.ts) like this:

import { Injectable } from '@angular/core';  
import { ToastrService } from 'ngx-toastr';
  
@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  
  constructor(private toastr: ToastrService) { }
  
  showSuccess(message, title){
      this.toastr.success(message, title);
  }      
  showError(message, title){
      this.toastr.error(message, title);
  } 
}

And, finally, call showSuccess or showError method from component (signup.component.ts) to display the message accordingly:

import { Component } from '@angular/core';  
import { NotificationService } from './notification.service'
  
@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignUpComponent implements OnInit {      
  
  constructor(private notifyService : NotificationService) { }

  //...

  this.notifyService.showSuccess("Signup successfully!", "");

  //...

  this.notifyService.showError("Signup failed!", ""); 

  //...         
}

Upvotes: 2

Boris Jenicek
Boris Jenicek

Reputation: 203

You could use Angular toast notifications for that, it has an adjustable auto disappearing feature. And it can be callable only from your observable not need for HTML.

  • I would suggest you look at this Toast Notification generator, here

  • And StackBlitz example, here

Upvotes: 0

Hen Hadayo
Hen Hadayo

Reputation: 1

You can use PrimeNG's toast message.

See example here

Upvotes: 0

Related Questions