How can a component be concealed in Angular while still permitting the passage of a function from the parent component?

Question

How can a component be concealed in Angular while still permitting the passage of a function from the parent component?

Looking for a solution here:

<app-csv-confirm-dialog *ngIf="false" (confirmUpload)="addDataFromCSV()"></app-csv-confirm-dialog>

addDataFromCSV() {
  console.log('hi');
}

In the TypeScript file for csv-confirm-dialog, I have this code:

confirm(): void {
  this.confirmUpload.emit();
}

Unfortunately, it seems like the function is not being passed correctly as I'm not seeing 'hi' in the console. Is there a way to still pass the function from the parent to the csv-confirm-dialog even though it needs to be hidden since it's a popup dialog?

angular typescript

Answer 1

Answer №1

To handle the event emitter, the component must exist in the DOM. Otherwise, consider eliminating the event emitter and utilizing a singleton service. Here's an example:

shared.service.ts

@Injectable({providedIn: 'root'})
export class SharedService {
  private _confirmUploadSource = new BehaviorSubject<any>(null);
  public confirmUpload$ = this._confirmUploadSource.asObservable();

  public setUploadStatus(value: any) {
    this._confirmUploadSource.next(value);
  }
}

CsvConfirmDialog component

export class CsvConfirmDialogComponent implements OnInit {
  constructor(private sharedService: SharedService) { }

  confirm(value: any): void {
    this.sharedService.setUploadStatus(value);
  }
}

Parent component

export class AppComponent implements OnInit, OnDestroy {
  completed$ = new Subject<any>();

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.confirmUpload$.pipe(
      takeUntil(this.completed$)
    ).subscribe(
      value => {
        console.log('hi');
        // perform actions from `addDataFromCSV()` function here
      }
    );
  }

  ngOnDestroy() {
    this.completed$.next();
    this.completed$.complete();
  }
}

Answer 2

To handle the event emitter, the component must exist in the DOM. Otherwise, consider eliminating the event emitter and utilizing a singleton service. Here's an example:

shared.service.ts

@Injectable({providedIn: 'root'})
export class SharedService {
  private _confirmUploadSource = new BehaviorSubject<any>(null);
  public confirmUpload$ = this._confirmUploadSource.asObservable();

  public setUploadStatus(value: any) {
    this._confirmUploadSource.next(value);
  }
}

CsvConfirmDialog component

export class CsvConfirmDialogComponent implements OnInit {
  constructor(private sharedService: SharedService) { }

  confirm(value: any): void {
    this.sharedService.setUploadStatus(value);
  }
}

Parent component

export class AppComponent implements OnInit, OnDestroy {
  completed$ = new Subject<any>();

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.confirmUpload$.pipe(
      takeUntil(this.completed$)
    ).subscribe(
      value => {
        console.log('hi');
        // perform actions from `addDataFromCSV()` function here
      }
    );
  }

  ngOnDestroy() {
    this.completed$.next();
    this.completed$.complete();
  }
}

How can a component be concealed in Angular while still permitting the passage of a function from the parent component?

Answer №1

Similar questions

Issue with narrowing TypeScript arrays often encountered

Setting the ariaLabel value in TypeScript is a straightforward process that involves defining the

Using Typescript to define the type for React's useState() setter function whenever

Angular, manipulating components through class references instead of creating or destroying them

"Launching" conduit for Observable

Using TypeScript to specify precise types for ReactWrapper within the Enzyme library

Angular Dynamic Alert Service

Disable TS4023 error in TypeScript: Unable to name external module "xyz"

Add TypeScript typings for npm utility manually by incorporating type definitions

Trouble with Vue3 Ref and Reactivity not displaying changes or updating

Error with the ng-select component in an Angular 8 project - Issue at Runtime involving the NgSelectComponent

Can you provide some instances where Angular2 ag-grid pagination has been implemented?

An error occurred in the ngrx store with Angular during production build: TypeError - Unable to access property 'release' of undefined

Tips for activating automatic building of packages when utilizing pnpm install?

Looking to update the state of a nested object with useReducer?

Nested interfaces can utilize sum types

Tips for transforming a Json array into an object in Angular 5

What is the best way to incorporate a class creation pattern in Typescript that allows one class to dynamically extend any other class based on certain conditions?

Tips for setting up a hierarchical mat-table within a parent table that supports expandable rows using Angular Material

Tips on injecting configuration into forRoot