How Do I Had Register Button After Register Success In Angular 5

• 
• Updated date Jul xvi, 2020

• 51.1k
• 7

In this commodity you lot will learn how to show/Hibernate Dialog or modal service in Athwart.

Introduction

In this article nosotros will encounter how to create a modal window or dialog box in Athwart. We will use Angular and typescript to prove or hibernate the modal window.

We volition exist using NgbModal in lodge to open the modal. This is just required to create a component and laissez passer the template in its open method.

This also have a Dismiss method for endmost the modal with the particular reason.

Let's starting time creating the application with the dialog service provided on a specified upshot.

We volition modify the existing application to add the Dialog functionality.

Where to apply the modal dialog?

1. Nosotros will endeavour to evidence the dialog if User is clicking on "Register" button without filling the fields.
2. We will try to prove the dialog if the User that you lot are trying to register is already present.
3. We will show dialog if the user is successfully created.

Nosotros volition be using RXJS Subject in order to accomplish the dialog service. Subject is a special type of observable that allow values to multicast to many observers.

Create a modal.service.ts in _services directory and add the below content:

1. import  { Injectable } from '@angular/core' ;
2. import  { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap' ;
4. @Injectable({
5.   providedIn:'root'
6. })
7. export class  ModalService {
8.     closeResult ='' ;
10.     constructor(private  modalService: NgbModal){}
12.     open(content) {
13. return this .modalService.open up(content, {ariaLabelledBy: 'modal-basic-championship' })
14.         .issue.then((issue) => {
15. return this .closeResult = `Airtight with : ${issue}`;
16.       }, (reason) => {
17. return this .closeResult = `Dismissed ${ this .getDismissReason(reason)}`;
18.       });
19.     }
21. private  getDismissReason(reason: whatsoever): string {
22. if  (reason === ModalDismissReasons.ESC) {
23. return 'past pressing ESC' ;
24.       }else if  (reason === ModalDismissReasons.BACKDROP_CLICK) {
25. return 'by clicking on a backdrop' ;
26.       }else  {
27. render  ` with : ${reason}`;
28.       }
29.     }
30. }
    

Create dialog.service.ts in _services directory and add the below contents:

1. import  { Injectable } from '@angular/core' ;
2. import  { Observable, Subject } from 'rxjs' ;
4. @Injectable({ providedIn:'root'  })
5. export class  DialogService {
6. private  dialogSubject = new  Subject<any>();
8.     sendDialog(dialog: {type: number, message: cord}) {
9. this .dialogSubject.next(dialog);
10.     }
12.     clearDialog() {
13. this .dialogSubject.next();
14.     }
16.     getDialog(): Observable<any> {
17. return this .dialogSubject.asObservable();
18.     }
19. }
21. Create folio.service.tsin  _services and add beneath contents:
22. import  { Injectable } from '@angular/cadre' ;
23. import  { Observable, Subject } from 'rxjs' ;
25. @Injectable({ providedIn:'root'  })
26. consign grade  PageService {
27. individual  pageSubject = new  Subject<any>();
29.     sendPage(dialog: {type: number, message: string}) {
30. this .pageSubject.adjacent(dialog);
31.     }
33.     clearPage() {
34. this .pageSubject.next();
35.     }
37.     getPage(): Observable<any> {
38. return this .pageSubject.asObservable();
39.     }
40. }
    

Let's create a component that will have the templates for opening the dialog content.

Create _component directory in app directory.

Create component prompt within _component directory.

Open prompt.component.ts

1. import  { Component, OnInit, Input, ViewChild, ElementRef } from '@athwart/core' ;
2. import  { ModalService } from 'src/app/_services/modal.service' ;
3. import  { DialogService } from 'src/app/_services/dialog.service' ;
4. import  { Subscription } from 'rxjs' ;
5. import  { PageService } from 'src/app/_services/page.service' ;
7. @Component({
8.   selector:'app-prompt' ,
9.   templateUrl:'./prompt.component.html' ,
10.   styleUrls: ['./prompt.component.css' ]
11. })
12. export course  PromptComponent implements  OnInit {
13.   @Input() result: number;
14.   subscription: Subscription;
15.   @ViewChild('dialog_required' ) dialog_required: ElementRef;
16.   @ViewChild('dialog_serverError' ) dialog_serverError: ElementRef;
17.   @ViewChild('dialog_success' ) dialog_success: ElementRef;
19.   closeResult ='' ;
20.   serverError ='' ;
21.   serverResponse ='' ;
23.   constructor(individual  modalService: ModalService, individual  dialogService: DialogService, private  pageService: PageService) {
24. this .outcome = 0;
25. this .subscription = this .dialogService.getDialog().subscribe(dialog => {
26. if  (dialog) {
27. this .open(dialog);
28.       }
29.     });
30.   }
32.   open(dialogType) {
33. switch (dialogType.type)
34.     {
35. case  one:
36. this .modalService.open( this .dialog_required).then(information=>{
37. this .closeResult = information;
38.           });
39. suspension ;
40. instance  2:
41. this .serverError = dialogType.bulletin;
42. this .modalService.open( this .dialog_serverError).then(data=>{
43. this .closeResult = data;
44.           });
45. pause ;
46. example  iii:
47. this .serverResponse = dialogType.message;
48. this .modalService.open up( this .dialog_success).and then(data=>{
49. this .closeResult = information;
50. this .pageService.sendPage({blazon: one, message: "page" })
51.           });
52. break ;
53. default :
54.           console.log('no modal opens' );
55.     }
56.   }
58.   ngOnInit():void  {
59.     console.log(this .upshot)
60.   }
62.   ngOnDestroy() {
64. this .subscription.unsubscribe();
65.   }
66. }
    

Open up prompt.comonent.html and add together the below contents:

1. <ng-template #dialog_required permit-modal>
2.   <divform = "carte du jour-header"  style= "background-colour:cyan;" >
3.     <h4>
4.       Mistake
5.     <button blazon="push" class = "close"  aria-label= "Close"  (click)= "modal.dismiss('Cantankerous click')" >
6.       <span aria-subconscious="true" >×</span>
7.     </button>
8.     </h4>
9.   </div>
10.   <divclass = "modal-trunk"  manner= "background-color:lightsteelblue" >
11.     <label>Required fields must be filled!</label>
12.   </div>
13. </ng-template>
15.   <ng-template #dialog_serverError permit-modal>
16.     <divgrade = "card-header"  fashion= "background-color:cyan;" >
17.       <h4>
18.         Error
19.       <push blazon="push" class = "close"  aria-label= "Close"  (click)= "modal.dismiss('Cross click')" >
20.         <span aria-hidden="true" >×</span>
21.       </button>
22.       </h4>
23.     </div>
24.     <divcourse = "modal-body"  style= "background-colour:lightsteelblue" >
25.       <characterization>{{serverError}}</label>
26.     </div>
27.   </ng-template>
29.   <ng-template #dialog_success allow-modal>
30.     <divgrade = "modal-header"  style= "background-color:cyan;" >
31.       <h4class = "modal-title"  id= "modal-basic-title" >Success</h4>
32.       <button type="push button" class = "close"  aria-label= "Close"  (click)= "modal.dismiss('Cross click')" >
33.         <bridge aria-hidden="true" >×</span>
34.       </push button>
35.     </div>
37.     <divcourse = "modal-body"  fashion= "groundwork-colour:lightsteelblue" >
38.       <form>
39.         <divclass = "form-grouping" >
40.           <characterizationfor = "serverResponse" >{{serverResponse}}</label>
41.         </div>
42.       </form>
43.     </div>
45.     <divclass = "modal-footer"  style= "background-color:lightsteelblue" >
46.       <button blazon="button" class = "btn btn-outline-dark"  (click)= "modal.shut('Save click')" >Ok</button>
47.     </div>
48.   </ng-template>
    

Open Register.component.ts and add the below contents:

1. import  { Component, OnInit } from '@athwart/core' ;
2. import  { AuthService } from '../_services/auth.service' ;
3. import  { User } from '../_model/user' ;
4. import  { Router } from '@angular/router' ;
5. import  { DialogService } from '../_services/dialog.service' ;
6. import  { Subscription } from 'rxjs' ;
7. import  { PageService } from '../_services/folio.service' ;
9. @Component({
10.   selector:'app-annals' ,
11.   templateUrl:'./register.component.html' ,
12.   styleUrls: ['./register.component.css' ]
13. })
14. export class  RegisterComponent implements  OnInit  {
16.   component: whatever;
17.   subscription: Subscription;
18.   registerResult: number = 0;
19.   registerUserData =new  User();
20.   constructor(individual  _authservice: AuthService, individual  router: Router, private  dialogService: DialogService, private  pageService: PageService) {
22. if  ( this ._authservice.currentUserValue) {
23. this .router.navigate([ '/paidevents' ]);
24.     }
26. this .subscription = this .pageService.getPage().subscribe(page => {
27. if  (page) {
28. this .open(page);
29.       }else  {
31.       }
32.     });
33.   }
35.   ngOnInit():void  {
36. this .registerUserData.username
37.       =this .registerUserData.firstName
38.       =this .registerUserData.lastName
39.       =this .registerUserData.password
40.       =""
41.   }
43.   ValidateUser(user){
44. if (!user.username || !user.firstName || !user.lastName || !user.password) render fake ;
45. render true ;
46.   }
47.   Register(user){
48. if (! this .ValidateUser(user)) {
49. this .dialogService.sendDialog({type:ane, message: "Required Fields must be filled.." });
50. return ;
51.     }
52.     console.log(user);
53. this ._authservice.registerUser(user).subscribe(data=>
54.       {
55.         console.log("login Details:" , data);
56. this .dialogService.sendDialog({type: iii, bulletin: data});
57.       },
58.       error => {
59.         panel.log("Error: " , error);
60. this .dialogService.sendDialog({type: ii, bulletin: error});
61.       },
62.       ()=>{
63.         console.log("login process complete!" );
64.       });
65.     console.log('Logged in!' );
66.   }
68.  open up(page){
69. switch (page.type)
70.    {
71. case  1:
72. this .router.navigate([ '/login' ], { queryParams: { }});
73. interruption ;
74. default :
75.         console.log('some information here..' );
76.    }
77.  }
78. }
    

Open register.component.html and add the beneath selector at the terminate.

<app-prompt></app-prompt>

Run the application,

Click on Register button.

You will get the dialog with mistake message. Click on close icon.

Let's register a user with proper details. Click on Register push button.

On Successful registration of User you will go the prompt.

Allow'due south create a user that is already registered.

You will get an error indicating the already taken username bulletin.

How it works,

1. Click on Register push button.
2. If fields are blank so information technology will sendDialog with type i, message: "Required Fields must be filled..".
3. From dialog service the prompt component will receive the value of sendDialog and open the dialog accordingly.

1. On successful creation of User it volition prompt the success dialog.
2. On clicking on Ok of dialog it will ship the page with type and message through pageService.
3. On Registering component the pageService is subscribed and on the next immediate folio value it will try to open the page based on parameter passed.
4. In simple terms, on successful cosmos of User it will evidence you a success prompt and when clicking on Ok push it will redirect to the Login Page.
5. This is all possible because of Subject nosotros have used in subscription and on the every new folio or dialog value it will notify or emit the consequence to the subscribed observer and make these things possible.

Thank you.

Source: https://www.c-sharpcorner.com/article/show-hide-dialog-or-modal-service-in-angular/

Posted by: kingdion1943.blogspot.com

Share this post