Advertisement
Guest User

Untitled

a guest
Jun 19th, 2019
200
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.66 KB | None | 0 0
  1. dialogRef.afterClosed().subscribe(result => {
  2. console.log("result", result);
  3. this.onModalClosePassData.emit(result);//emit to parent
  4. });
  5.  
  6. parent component.html
  7.  
  8. <ng-template #showTextOnly>
  9. <child-component [branch]="releaseBranch" [date]="dateString"
  10. (onModalClosePassData)="updateComment($event)">
  11. </child-component>
  12. </ng-template>
  13.  
  14. parent component.ts
  15.  
  16. //This method is getting called when i click on backDrop,
  17.  
  18. child-component.html
  19.  
  20. <button class="btn btn-default" (click)="openDialog()">Login</button>
  21.  
  22. child-component.ts
  23.  
  24. export class ChildComponent implements OnInit {
  25. @Output() onModalClosePassData = new EventEmitter();
  26. constructor(public dialog: MatDialog) { }
  27. openDialog(): void {
  28. const dialogConfig = new MatDialogConfig();
  29. dialogConfig.disableClose = false;
  30. dialogConfig.autoFocus = false;
  31. dialogConfig.hasBackdrop= true;
  32. dialogConfig.width = '300px';
  33. dialogConfig.autoFocus=true;
  34. dialogConfig.data = {branch: this.branch, date: this.date};
  35. const dialogRef = this.dialog.open(LoginDialog, dialogConfig);
  36.  
  37. dialogRef.afterClosed().subscribe(result => {
  38. console.log("result", result); //result is getting called in both cases
  39. this.onModalClosePassData.emit();
  40. });
  41. }
  42. }
  43.  
  44. LoginDialog.component.ts
  45.  
  46. import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
  47. export class LoginDialog implements OnInit{
  48. constructor(private loginService: LoginService, public dialogRef: MatDialogRef<LoginDialog>,
  49. @Inject(MAT_DIALOG_DATA) public data: any) {}
  50. public submitForm = (formValue: any) => {
  51. if (this.noteForm.valid) {
  52. let encryptData = btoa(`${formValue.username}:${formValue.password}`);
  53. this.loginService.login(encryptData)
  54. .subscribe((response:any)=>{
  55. if(response.STATUS === "FAILED"){
  56. } else {
  57. this.dialogRef.close(this.noteDetail);
  58. }
  59. })
  60. }
  61. }
  62.  
  63. }
  64. LoginDialog.component.html
  65.  
  66. <form [formGroup]="noteForm" autocomplete="off" novalidate (ngSubmit)="submitForm(noteForm.value)">
  67. <mat-dialog-content class="mat-typography">
  68. <mat-form-field>
  69. <mat-label>User Name</mat-label>
  70. <input matInput type="text" formControlName="username" id="username">
  71. </mat-form-field>
  72. <mat-form-field>
  73. <mat-label>Password</mat-label>
  74. <input matInput type="password" formControlName="password">
  75. </mat-form-field>
  76. </mat-dialog-content>
  77. <mat-dialog-actions align="center">
  78. <button mat-raised-button color="primary" [disabled]="!noteForm.valid">Submit</button>
  79. </mat-dialog-actions>
  80. </form>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement