Hello everyone, I am currently attempting to retrieve the most recent updated value of a variable from the component app-confirm-bottom-sheet in the app-bene-verification.ts component, but unfortunately, I am unable to achieve this. Below is the code snippet from the app-confirm-bottom-sheet.ts component:
import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
import { MatBottomSheet, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
import { UtilityService } from '../../services/utility.service';
@Component({
selector: 'app-confirm-bottom-sheet',
templateUrl: './confirm-bottom-sheet.component.html',
styleUrls: ['./confirm-bottom-sheet.component.scss']
})
export class ConfirmBottomSheetComponent implements OnInit {
sheetData: any;
confirmForm!: FormGroup;
npciUserName:any=''
constructor(
private bottomSheet: MatBottomSheet,
@Inject(MAT_BOTTOM_SHEET_DATA) public data: any = {},
private fb: FormBuilder,
private changeDetector: ChangeDetectorRef,
private utilityService: UtilityService
) {
}
ngOnInit(): void {
}
updateUserName(): void {
this.utilityService.updateNpciUserName(this.npciUserName);
}
checkNpci() {
console.log(this.npciUserName);
}
Below is the HTML from app-confirm-bottom-sheet.html:
<input type="text" [(ngModel)]="npciUserName" placeholder="Enter your name" (keyup)="updateUserName()" >
Now, let's take a look at the code in app-bene-verification.ts:
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { DatePipe } from '@angular/common';
import { MatBottomSheet } from '@angular/material/bottom-sheet';
import { ConfirmBottomSheetComponent } from './../../../../common/dialogs/confirm-bottom-sheet/confirm-bottom-sheet.component';
import { BankValidationService } from '../../services/bank-validation.service';
import { UtilityService } from './../../../../common/services/utility.service';
import { ExportService } from './../../../../common/services/export.service';
import { Subscription } from 'rxjs';
export interface BeneData {
agent_ref_id: string
agent_mobile_no: string
account_holder_name: string
// Other property declarations removed for brevity
}
@Component({
selector: 'app-bene-verification',
templateUrl: './bene-verification.component.html',
styleUrls: ['./bene-verification.component.scss']
})
export class BeneVerificationComponent implements OnInit {
npciUserName: any = '';
npciUserNameSubscription!: Subscription;
// Constructor and other method implementations omitted
}
The issue here is that the npciUserName remains set to the default value. The latest value retrieved from app-confirm-bottom-sheet.html is not being reflected in app-bene-verification.ts. To address this problem, we need to modify the code in the utility-service.ts as follows:
import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UtilityService {
constructor(private _snackBar: MatSnackBar) { }
private npciUserNameSubject = new BehaviorSubject<any>(null);
npciUserName$ = this.npciUserNameSubject.asObservable();
updateNpciUserName(value: any) {
this.npciUserNameSubject.next(value);
}
So the question remains, how can we access the most recently emitted value of npciUserName from confirm-bottom-sheet in bene-verification.ts?