Angular - Dismiss modal triggered by service, from a header module

  • Within my Angular application, I have Service S that is responsible for opening Component C MatDialog;
  • I am aiming for C to include a reusable header component called Component H;
  • My goal is for H to feature a button that can close the MatDialog within C;

My initial attempts included:

  • Trying to keep MatDialogRef as a property of S, allowing me to import it from H and call its close method. However, this led to a circular dependency issue (S -> C -> H -> S) and tightly coupled H with the S -> C structure.
  • Exploring emitting an event using @Output() from H to C in order to decouple H. Yet, this approach still prevented me from injecting the service into C due to a circular dependency problem (S -> C -> S).

It seems like my current approach may be flawed. Is there a standard method to achieve this without encountering a circular dependency, while also ensuring that H remains detached from C?

angulartypescriptangular-material

Answer №1

To access a unique dialog box, you can specify a custom ID:

service-custom.ts:

this.customDialog.open(CustomComponent, { id: 'unique-dialog-id' });

Next, retrieve the dialog reference from CustomDialog and close it using your main component (Component Main)

component-main.ts:

<button (click)="customDialog.getDialogById('unique-dialog-id')?.close()">Close</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

Performing Jasmine unit testing on a component that relies on data from a service, which itself retrieves data from another service within an Angular 2+ application

Attempting to implement unit testing for a service using httpmock has been challenging. The service in question utilizes a method to make http get calls, but I have encountered difficulties in writing the test cases. saveservice.service.ts -- file const ...

javascriptangulartypescriptunit-testingjasmine

Issues with the rating plugin functionality in Ionic 3

After following the instructions in this tutorial: http://ionicframework.com/docs/native/app-rate/ Even though I implemented the second method, I encountered the following error: Uncaught (in promise): TypeError: Cannot read property 'split' ...

angulartypescriptionic3cordova-pluginsionic-native

How to dynamically assign formControlName in nested Angular formGroups

Is there a way to dynamically set formControlName and placeholder on newly created input forms in Angular 6 using formGroup and formArray? component.html : <form [formGroup]="ecosystemFormG" novalidate> <div formArrayName="transacti ...

angularangular-formsangular6

How come I can click on both radio buttons simultaneously?

How come I can select both radio buttons simultaneously? <form #form="ngForm"> {{ poll.counter1 }} votes <input type="radio" id="{{ poll.choice1 }}" value="{{ poll.choice1 }}" (click)="onChoice1(form)">{{ poll.choice1 }} <br> ...

htmlangular

Is there a Typescript function error that occurs when attempting to rename a key, stating it "could potentially be instantiated with a different subtype"?

I am currently working on a Mongoify type that accepts a type T, removes the id key, and replaces it with an _id key. type Mongoify<T extends {id: string}> = Omit<T, "id"> & { _id: ObjectId }; function fromMongo<T extends ...

typescript

The error message "TypeScript reflect-metadata Cannot find name 'Symbol'" indicates that TypeScript is unable to locate

While browsing through http://www.typescriptlang.org/docs/handbook/decorators.html#class-decorators, I encountered an issue where it could not find the Symbol. I was unsure whether this is related to the usage of reflect-metadata or if it was previously in ...

typescriptvisual-studio-code

Is there a way to reset useQuery cache from a different component?

I am facing an issue with my parent component attempting to invalidate the query cache of a child component: const Child = () => { const { data } = useQuery('queryKey', () => fetch('something')) return <Text>{data}& ...

javascriptreactjstypescriptreact-native

Utilizing absolute imports in Typescript directory structure

Our team has a preferred structure for organizing React code, which looks like this: components/ button.tsx slider.tsx index.ts helpers/ math.ts auth.ts index.ts constants/ config.ts api.ts index.ts In this setup, each ...

reactjstypescript

Provide an immutable parameter to a function that will not cause any changes

Looking to develop a function named batchUsers, requiring a parameter of type readonly string in order to create a DataLoader. However, when calling the User.findBy function within my batchUsers function, it's causing issues due to conflicting paramet ...

typescriptreadonlytype-safetydataloader

Animated CSS side panel

I'm currently working on creating an animation for a side menu. The animation works perfectly when I open the menu, but the problem arises when I try to animate it back closed. Is there a property that allows the animation to play in reverse when the ...

cssangularcss-animations

What is the best way to pass a URL as a prop in Next.js without encountering the issue of it being undefined

Within my file (handlers.ts), I have a function designed to post data to a dynamic API route while utilizing the app router. This function requires values and a URL for fetching. However, when I pass the URL as a prop like this: http://localhost:3000/unde ...

reactjstypescriptnext.jsapp-router

Ensuring strictNullChecks in Typescript is crucial when passing values between functions

When using the --strictNullChecks flag in TypeScript, there seems to be an issue with inferring that an optional property is not undefined when the check occurs in a separate function. (Please refer to the example provided, as articulating this clearly is ...

javascripttypescripttypescript2.0

Struggling with TypeScript Errors while Extending Theme Colors in Material UI React using TypeScript

Just started with typescript and feeling a bit lost, can someone offer some guidance? I'm working on a React project using material-ui with typescript. To add a new color the correct way, it needs to be added to a theme: const theme = createMuiTheme({ ...

reactjstypescriptcolorsmaterial-uithemes

Modify the ngb-timepicker formatting to output a string instead of an object

I am currently working on modifying ngb-timepicker so that it returns a string instead of an object. Right now, it is returning the following format: { "hour": 13, "minute": 30 } However, I want it to return in this format: "13:30" This is the HTM ...

javascriptangulartypescriptbootstrap-4

Enhance your React Typescript High Order Component by incorporating additional properties and implementing them

I am in the process of creating a React HOC with specific requirements: It should take a component as input, modify the hidden property (or add it if necessary), and then return the updated component The rendered component should not display anything whe ...

reactjstypescripthigh-order-component

Filtering an array using criteria: A step-by-step guide

Currently, I am developing a system for Role Based permissions that involves working with arrays. Here is an example of the array structure I have: let Roles = { [ { model: 'user', property: 'find', permission: 'allow' ...

javascriptarraystypescriptangular5

Angular 8 encountered an error in content_script.js at line 71. The error was classified as a LEVEL: ERROR within the MODULE:

I am currently working on an Angular 8 application with Dotnet Core, and I have encountered a strange error message in the developer's console recently: content_script.js:71 LEVEL: ERROR | MODULE: LEAKED_CREDENTIALS | SESSION: a1293cfe | MESSAGE: &qu ...

angularnpm

Struggling with installing Angular CLI, can anyone provide guidance on resolving the issue?

When trying to install Angular CLI on my laptop for practicing Angular, I encountered an error that caused it to freeze. Despite attempting various solutions, the problem persists. What could be the possible solution? S F:\talent_angular> npm insta ...

node.jsangularnpmangular-clinpm-install

Filtering based on the boolean value of a checkbox in Angular

I'm struggling to implement a boolean filter for my search results, separating users with financial debt from those without. I need some guidance on how to achieve this. Data Filter @Pipe({ name: 'filter' }) export class FilterPipe implem ...

angulartypescript

Utilizing ngModel within a nested ngFor loop in Angular to capture changing values dynamically

I have been working on developing a screen using Angular and I'm facing an issue with binding values using ngModel. https://i.sstatic.net/DCJ3T.png Here is my implementation. Any help would be appreciated. The model entity I am using for binding the ...

htmlangulartypescriptngforngmodel