Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- dialogRef.afterClosed().subscribe(result => {
- console.log("result", result);
- this.onModalClosePassData.emit(result);//emit to parent
- });
- parent component.html
- <ng-template #showTextOnly>
- <child-component [branch]="releaseBranch" [date]="dateString"
- (onModalClosePassData)="updateComment($event)">
- </child-component>
- </ng-template>
- parent component.ts
- //This method is getting called when i click on backDrop,
- child-component.html
- <button class="btn btn-default" (click)="openDialog()">Login</button>
- child-component.ts
- export class ChildComponent implements OnInit {
- @Output() onModalClosePassData = new EventEmitter();
- constructor(public dialog: MatDialog) { }
- openDialog(): void {
- const dialogConfig = new MatDialogConfig();
- dialogConfig.disableClose = false;
- dialogConfig.autoFocus = false;
- dialogConfig.hasBackdrop= true;
- dialogConfig.width = '300px';
- dialogConfig.autoFocus=true;
- dialogConfig.data = {branch: this.branch, date: this.date};
- const dialogRef = this.dialog.open(LoginDialog, dialogConfig);
- dialogRef.afterClosed().subscribe(result => {
- console.log("result", result); //result is getting called in both cases
- this.onModalClosePassData.emit();
- });
- }
- }
- LoginDialog.component.ts
- import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
- export class LoginDialog implements OnInit{
- constructor(private loginService: LoginService, public dialogRef: MatDialogRef<LoginDialog>,
- @Inject(MAT_DIALOG_DATA) public data: any) {}
- public submitForm = (formValue: any) => {
- if (this.noteForm.valid) {
- let encryptData = btoa(`${formValue.username}:${formValue.password}`);
- this.loginService.login(encryptData)
- .subscribe((response:any)=>{
- if(response.STATUS === "FAILED"){
- } else {
- this.dialogRef.close(this.noteDetail);
- }
- })
- }
- }
- }
- LoginDialog.component.html
- <form [formGroup]="noteForm" autocomplete="off" novalidate (ngSubmit)="submitForm(noteForm.value)">
- <mat-dialog-content class="mat-typography">
- <mat-form-field>
- <mat-label>User Name</mat-label>
- <input matInput type="text" formControlName="username" id="username">
- </mat-form-field>
- <mat-form-field>
- <mat-label>Password</mat-label>
- <input matInput type="password" formControlName="password">
- </mat-form-field>
- </mat-dialog-content>
- <mat-dialog-actions align="center">
- <button mat-raised-button color="primary" [disabled]="!noteForm.valid">Submit</button>
- </mat-dialog-actions>
- </form>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement