No outcome is returned by Angular 8 following the closure of the dialogref.afterclosed()

Trying to pass data from my dialog to the parent component, but ending up with an empty result. Here's my dialog template:

<mat-form-field class="example-full-width">
      <input [(ngModel)]="data.animalData" matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>

This is how my parent component ts looks like:

export interface DialogData {
  aze:any;
}

openDialog(az:any) {
  let dialogRef = this.dialog.open(MyDialogComponent, {
    width: '100px',
    data: {aze:this.az}
  });
  dialogRef.afterClosed().subscribe(result => {
    this.azz = result;
  })
}

Even though I want to pass data.animalData to the result, it seems to be empty.

Note that :

console.log(this.data.animalData);
prints something in the dialog component.

Answer №1

To make your button close the dialog and return a value, include the value in the mat-dialog-close attribute like so:

<button mat-raised-button [mat-dialog-close]="data.animalData" type="button" class="Discard-btn">
    Cancel
</button>

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

"My C# ASP.NET Core HTTP POST Request functions properly with Postman, but I encounter a 404 error when attempting to use it with my Angular client

I'm facing difficulties with my c# asp .net core Rest Server. I have set up an AuthenticationController with a test Route that functions correctly when tested using Postman. However, when attempting to achieve the same result in my Angular 6 Applicati ...

Limiting the number of characters in a PrimeNG Quill editor

I am currently working on implementing a maximum length for the editor. Here is the code snippet I am using: this.editorTextChange$$ = this.quillEditor.onTextChange.asObservable() .subscribe((ev) => { const limit = this.maxLength; // last cha ...

What is the impact on active subscriptions when the browser is closed or refreshed?

Within the app component (the root component) of an Angular application, I have a few subscriptions set up. Since the app component remains active and is never destroyed until the application is closed, the ngOnDestroy method of the app component does not ...

Pressing the tab key always skips one input field in Angular 11

My issue seems to be quite trivial - when I press the TAB key, it always skips one input element (even though I am not using the "tabindex" property). The browser focus moves from 'A' to 'C', then from 'C' to 'E' and ...

Unable to execute karma test cases as a result of ngOnDestroy being inaccessible

I have a component structured as follows: export class InkbarComponent implements AfterViewInit, OnDestroy { resizeListener: any; constructor(private _renderer: Renderer, private _elementRef: ElementRef, public renderer: Renderer) { } ngAfter ...

Issue with Angular/Chrome: The filter pipe is not able to be located

Even though this topic has been covered before, I have not found any satisfactory solutions. Here is my approach: play.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; impor ...

Angular 10: Issues with Reactive Forms functionality

I have a CRUD application in Angular 10 that utilizes a simple user form to insert data into a database. For the database operations, I am using Microsoft Visual Studio. The error I am encountering is only within the user form and I suspect it might be due ...

You have encountered an issue with the runtime-only build of Vue, which does not include the template compiler

Lately, I have been utilizing Vue in a project and encountered an issue where upon compiling, my browser page displays as white with an error message stating "You are using the runtime-only build of Vue where the template compiler is not available. Either ...

What causes the typescript error in my code: The argument being passed is either a string, an array of FilterData, an array of numbers, or an array of Moments, which is not compatible with a parameter of type 'string'?

When writing my code, I have the need to utilize various types for different scenarios. Depending on the situation, the type may be a string, number[], FilterData[] (a custom type), or Moment[]. To address this requirement, I defined the type as: export ty ...

Having trouble implementing a CSS style for a Kendo-checkbox within a Kendo-treeview component

I am facing a The issue I am encountering is that while the CSS for k-treeview is being applied from the scss file, it is not being applied for the kendo-checkbox I attempted to resolve the problem by using the following code: <kendo-treeview ...

Using Typescript with Gulp 4 and browser-sync is a powerful combination for front-end development

Could use some assistance with setting up my ts-project. Appreciate any help in advance. Have looked around for a solution in the gulpfile.ts but haven't found one yet. //- package.json { "name": "cdd", "version": "1.0.0", "description": "" ...

Solving the TypeScript error: "Element implicitly has an 'any' type because an expression of type 'string' cannot be used to index type"

I'm having difficulty properly declaring a variable in my code. Here is the code snippet I am working with: ngOnInit(): void { this.activatedRoute.fragment.subscribe(numberOfTab => { if (numberOfTab) { this.tabs[numberOfTab].active = true; } else ...

Node.js and mongoose provide a powerful tool for filtering documents dynamically by leveraging a variable that is dependent on another document. Want to learn

I've hit a bit of a roadblock here... I'm trying to add a new property to a document that will change based on the values in that document as well as another document. Let me provide an example to clarify. First, I have a Candidate Schema: const ...

Incorporate the Authy library from Twilio into a NestJS project

When working with the authy library in a Node.js file using JavaScript, we typically use the following statement: const authy = require('authy')('API KEY'); Now that I have moved my code to the Nest ecosystem and am using TypeScript, h ...

Error in Angular compiler-cli: The namespace 'ts' does not contain the exported member 'ResolutionMode'

Currently working on a web application using Angular 16 in Webstorm. The application is still in the pre-release stage, with only minimal functionality completed so far. While editing with ng serve running to test changes as they were made, encountered an ...

Using Angular to scroll within a <div> that is obstructed by other <div>s and concealed by

I am currently in the process of developing a website using Angular. I have implemented a card feature that allows for text selection from a menu on the left side. The texts are displayed using the *ngIf directive. However, I encountered an issue where if ...

Ensure that Angular resolver holds off until all images are loaded

Is there a way to make the resolver wait for images from the API before displaying the page in Angular? Currently, it displays the page first and then attempts to retrieve the post images. @Injectable() export class DataResolverService implements Resolv ...

Tips for resolving a typescript Redux connect error related to ActionCreatorsMapObject

Encountering typescript error: ERROR in [at-loader] ./src/app/components/profile/userProfile/_userMain.tsx:130:37 TS2345: Argument of type 'typeof "/usr/src/app/src/js/src/app/redux/actions/sessionActions"' is not assignable to parameter of ...

Tips for transferring data to a child component's @Input using Observables

I've created an angular component that serves as a tab within a for loop on my HTML page: ... <ng-container *ngFor="let tabData of data$ | async;"> <tab-component id="{{ tabData.id }}" name="{{ tabData.name }} ...

Utilizing SimulationLinkDatum and SimulationNodeDatum effectively in d3 visualization

I've encountered an issue while using the SimulationLinkDatum Type. I have created two classes, Node and Link, which implement SimulationNodeDatum and SimulationLinkDatum. However, when attempting to use SimulationLinkDatum, TypeScript displays an err ...