Sending data to a parent component from a popup window in Angular Material using a button click while the window is still open

How can I retrieve data from an Angular Material Dialog Box and send it to the Parent component?

I am able to access data after the dialog box is closed. However, I am wondering if there is a way to retrieve data while the dialog box is still open, especially when a person clicks a button within the dialog box.

public openPropertySearchDialog(): void {
  const propertySearchDialogRef = this.propertySearchDialog.open(PropertyGridDialogComponent, 
  {
     width: '1500px',
     height: '950px',
     data: this.propertyList,
     hasBackdrop: false
   });
  
   propertySearchDialogRef.afterClosed().subscribe(result => {
     console.log('propertyResult', result);
   });
}

Update:

The code above subscribes to the data. The challenge now is to retrieve data when a Button is clicked inside the Dialog component. I am considering adding another subscription for the button press event in a clean manner, rather than having two separate subscriptions.

propertySearchDialogRef .componentInstance.propertyOutput.subscribe((data: any) => {
  console.log('test', data);
});

https://material.angular.io/components/dialog/api

Many resources online focus on retrieving data only when the window is closed. I am looking for a solution for retrieving data when the dialog box is open and a button is clicked (without closing the dialog box).

How to pass data to afterClosed() in Angular Material Dialog in Angular 6

Pass several data from Mat Dialog Angular 4 back to parent

Answer №1

To enable communication between components, you can utilize an Output event emitter in your popup component.

  onAdd = new EventEmitter();
  constructor() {
    
  }
  
  onButtonClicked() {
    this.onAdd.emit('test');
  }

In the parent component,

  openDialog() {
      const ref = this._dialog.open(InnerComponent);
      const sub = ref.componentInstance.onAdd.subscribe((data) => {
        console.log(data);
      });
      dialogRef.afterClosed().subscribe(() => {
        sub.unsubscribe();
      });
  }

By subscribing to the onAdd event, you can receive data emitted when the button is clicked within your popup component. Simply trigger the (click) event on your button and call onButtonClicked().

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring Data in Angular 2: Examining Individual Records

I am currently learning Angular and facing some challenges in structuring my questions regarding what I want to achieve, but here is my query. Within a component, I am retrieving a single user record from a service. My goal is to display this user's ...

Can sweetalert2 be used as a tooltip?

I have a query, is it feasible to include a tooltip in the alert message? Alternatively, could there be another tooltip option available? Swal.fire({ title: '<strong>An example with HTML tags</strong>', icon: 'info', ...

Flying around in every essential element within a Vue template

Recently, I made the switch to Typescript for Vue and decided to enable the Volar extension. However, after doing so, I noticed that every HTML intrinsic element (such as section and img) is now being flagged as an error: JSX element implicitly has type &a ...

React doesn't have file upload configured to update the state

I am working on integrating a file upload button that sends data to an API. To ensure only the button triggers the upload dialog and not the input field, I have set it up this way. Issue: The File is not being saved to state, preventing me from using a ...

Identifying the pressed key on a mouse click event using Angular 2

I am working on an Angular 2 component that has a div element bound to a click event: <div #myDiv class="myClass" (click)="addAnnotation($event)"> </div> When the div is clicked, I want the addAnnotation code to run only if the 'a&ap ...

What is the process for obtaining a Component's ElementRef in order to access the BoundingClientRect of that specific Component?

I have successfully created a tooltip using Angular 5.2.0 and ngrx. The tooltip, among other things, receives an ElementRef to the target Element when the state updates, allowing me to position it absolutely: let rect = state.tooltip.target.nativeElement. ...

Give it a little time before uploading a widget onto the page

As a newcomer to programming, I recently came across this code from an open source project. I am in the process of loading a widget onto a website. Instead of having the widget load instantly, I would like it to wait 10 seconds before displaying. Below i ...

What are the steps to create a circular progress bar in an Ionic 3 application?

Can anyone help me create a circular progress bar in Ionic 3? I'm new to Ionic and have already attempted to install the jQuery circle progress package by running npm install jquery-circle-progress. The installation was successful, but now I'm un ...

The final position of the Angular increment animation does not hold

Is there a way to trigger an animation when the value of countAllOrders changes? Specifically, I am attempting to adjust the margin of a list using keyframes in an Angular animation. Here is my HTML code: <ul class="digits" [@ordersValue]=&q ...

The type 'RefObject<HTMLDivElement>' cannot be matched with type 'RefObject<HTMLInputElement>' in this context

Encountered an error message: Issue with assigning types: Type '{ placeholder: string | undefined; autoComplete: string | undefined; "data-testid": string | undefined; onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement&g ...

Interacting between components using Angular 2 services

I am attempting to implement bidirectional service communication using Angular. I have followed the instructions provided in the documentation here: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service interactio ...

Tips for fetching individual item information from Firebase real-time database using Angular 9 and displaying it in an HTML format

product.component.ts import { AngularFireDatabase } from '@angular/fire/database'; import { ProductService } from './../product.service'; import { ActivatedRoute } from '@angular/router'; import { Component, OnInit} from &apo ...

Input does not have access to ngModel's property

I'm facing an issue with NgModel as it doesn't seem to work when I try to save data from an input field. Uncaught Error: Template parse errors: Can't bind to 'NgModel' since it isn't a known property of 'input'. (" ...

best practices for choosing items from a dropdown menu using Angular

I have a dropdown list displaying existing tags/chips created by users in the past. However, I'm having an issue where when I select a tag from the dropdown list, it doesn't show up in my input field (similar to the Chart tag currently). I am abl ...

Fade-in and fade-out animations in Angular triggered by a click event

I developed a fade-in, fade-out animation for a div element. My goal is to achieve the following: Upon initial page load, there is a div element that displays some numbers. On the right and left sides of the div, there are two buttons. When a user cl ...

"I am looking to retrieve the properties of an object that belongs to the EChartsOption type in TypeScript when working with Angular and ECharts. How

Currently, I am exploring how to access a property of an EChartOptions object in Angular 16.0.2, which may be undefined as I am still new to TypeScript. List of npm packages: eapp/src$ npm list <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

Ways to avoid route change triggered by an asynchronous function

Within my Next.js application, I have a function for uploading files that includes the then and catch functions. export const uploadDocument = async (url: UploadURLs, file: File) => { const formData = new FormData(); formData.append("file" ...

Error: Missing provider for MatBottomSheetRef

While experimenting in this StackBlitz, I encountered the following error message (even though the MatBottomSheetModule is imported): ERROR Error: StaticInjectorError(AppModule)[CountryCodeSelectComponent -> MatBottomSheetRef]: S ...

Unable to access the API within Angular using a web browser

My Angular application is hosted within an ASP.NET Core application on IIS. The API controller of the ASP.NET Core application can be accessed using the HTTP client in Angular as well as in a C# console application. However, I am facing an issue where I c ...

What is the best way to ensure that each service call to my controller is completed before proceeding to the next one within a loop in Angular?

Calling an Angular service can be done like this: this.webService.add(id) .subscribe(result => { // perform required actions }, error => { // handle errors }); // Service Definition add(id: number): Observable < any > { retu ...