The specified '<<custom component name>>' argument does not match the 'Type<<custom component name>>' parameter

I'm currently facing an error that indicates a type parameters mismatch, but I can't pinpoint where in the process it's happening. 

Argument of type 'ModalUserInfoComponent' is not assignable to 
parameter of type 'Type<ModalUserInfoComponent>'.
Type 'ModalUserInfoComponent' is missing the following properties from 
type 'Type<ModalUserInfoComponent>': apply, call, bind, prototype, and 
5 more.

To showcase this issue, I've prepared a stackblitz. The functionality seems to be affected due to issues with passing form builder data correctly.

In the stackblitz example, you'll see that the modal only returns the first and last names while the rest of the fields are missing.

There's another related error that I need to investigate further. 

Error: "ExpressionChangedAfterItHasBeenCheckedError: Expression has 
changed after it was checked. Previous value: 'form: undefined'. 
Current value: 'form: [object Object]'. It seems like the view has been 
created after its parent and its children have been dirty checked. Has 
it been created in a change detection hook ?"
typescriptbootstrap-modalangular7

Answer №1

Alright, the solution to this problem turned out to be:

public contentComponent: Type<ModalVariants>;

Rather than: 

public contentComponent: <ModalVariants>;

That was my mistake.

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

What is the best way to access an object's key within an array using TypeScript?

How can I access the key values of the objects stored in a predefined array? const temp = [ { key: "name", value: "mike" }, { key: "gender", value: "male" }, ]; I am interested in retrieving the key values, such as name and gender, from the objects wi ...

typescripttypescript-genericstypescript2.0

Is it recommended to include modules in the Imports section of SharedModule in Angular?

Welcome to my SharedModule! import { CommonModule } from "@angular/common"; import { NgModule } from "@angular/core"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { IconModule } from "@my-app/components/icon/icon.module"; impo ...

angulartypescriptangular-moduleshared-module

Simplified Method for Verifying Null and Undefined in Typescript

Hey there, I'm currently working on an Angular 11 project and I'm facing a challenge when it comes to checking for null and undefined values. In my scenario, I have three strings - equipmentId, roomId, and personnelId, as well as a boolean flag ...

angulartypescript

Retrieving an Enum member based on its value in TypeScript

I am working with an enum called ABC: enum ABC { A = 'a', B = 'b', C = 'c', } In addition, I have a method named doSomething: doSomething(enum: ABC) { switch(enum) { case A : console.log(A); break; case ...

javascripttypescriptenums

Developing a Universal Type in Typescript

Encountered an issue with generic types while working on a user-defined type(interface) structured like this: IList1: { prop1: string, prop2: number, prop3: string . . . } ILi ...

typescript

What is the solution for resolving the no-unsafe-any rule?

Currently incorporating TSLint for maintaining the quality of my Angular TypeScript code. I've opted to activate the 'no-unsafe-any' rule from TSLint, as it appears beneficial to avoid making assumptions about properties with type 'any& ...

typescripttslinttypescript-types

Utilize a single function across multiple React components to interact with the Redux store, promoting code reusability and

Currently facing a dilemma. Here is a snippet of code that updates data in the redux store from a function, and it functions smoothly without any issues. const handleCBLabelText = (position: string, text: string) => { dispatch({ type: ' ...

reactjstypescriptredux

Migrating image information from Angular version 14 to Asp.Net Core 6.0 Rest Api

When transferring product model data from Angular to a REST API using FormData, there is an images array included in the product data. Upon receiving this product in the REST API, the images data is accessed using Request.Form.Files. The images are then se ...

asp.netangulartypescriptasp.net-coreasp.net-web-api

Mastering the art of connecting content within Prismic

I have been working on creating a mega menu for my website header, but I am encountering a type error. Has anyone else faced this issue before and how did you resolve it? I am currently importing the generated types from @/prismicio-types. Here is an exam ...

typescriptnext.jsprismic.io

Tips on preventing the need for null or undefined checks in JS/Typescript singletons that have an initialization function

Is there a way to streamline the process of handling props in an Object literal that is dynamically initialized only once? I'm looking for a pattern that would eliminate the need for repetitive null/undefined checks and throw errors when certain metho ...

javascripttypescriptdesign-patternssingletoncoding-style

Show a roster of individuals by inputting values that will populate the list with their names

I'm attempting to showcase a list of users by taking the value from an input and using it as a parameter in a get() method. After receiving the response from the get() method, I am pushing it into an object and then trying to display this object in th ...

angularlisttypescriptinput

What is the best way to access data from a local JSON file in Gatsby when using TypeScript and GraphQL?

I'm updating my former gatsby site using TypeScript. I encountered an issue while trying to retrieve data from a local JSON file: There appears to be an error in your GraphQL query: Cannot find field "allNavigationLinksJson" on type "Q ...

jsontypescriptgraphqlgatsby

Angular2 webpack example error: Cannot execute function 'call' because it is undefined

As I navigate through the Angular2 webpack sample app on https://angular.io/docs/ts/latest/guide/webpack.html, I've encountered an issue. After completing the "Development Configuration" section and attempting the "try it out" by copying the app code ...

angulartypescriptwebpack

Could not find the 'injectTapEventPlugin' export in the dependencies of Material-UI related to 'react-tap-event-plugin'

Currently, I am working on a project that involves using react, typescript, material-ui, and webpack. An issue has arisen with importing the injectTapEventPlugin function from the dependency of Material-UI, react-tap-event-plugin. The specific error messag ...

reactjstypescriptmaterial-uitypescript-typings

Detecting the check status of a checkbox in react native: a complete guide

I'm currently working on a scenario where I need to implement logic for checking or unchecking a checkbox in React Native. If the checkbox is checked, I want to print one string, and if it's unchecked, I want to print something else. How can I ac ...

androidiostypescriptreact-native

When incorporating Papaparse with Angular 2, encountering the issue "Identifier 'Papa' is not found" may arise

Currently, I am facing an issue in my project where after deleting and re-installing node_modules to resolve errors, the definition of 'Papa' is missing. As a result, when npm updated the node modules again, Angular 2 is unable to find 'Papa ...

angulartypescriptpapaparse

React does not allow _id to be used as a unique key

When I retrieve the categories from my allProducts array fetched from the database using redux-toolkit, I filter and then slice the array for pagination before mapping over it. However, I keep encountering a warning: Each child in a list should have a un ...

javascriptreactjstypescript

Data transmission is only possible when the connection is in the 'Connected' state

Trying to set up a simple connection using SignalR in Angular 6, I wrote the following code: signalR.helper.ts public static setupHub<T>(hubUrl: string, eventName: string, callback: (data: T) => void, ...params: SignalRParam[]): HubConnection ...

angulartypescriptsignalrangular6signalr-hub

Merging an assortment of items based on specific criteria

I have the following TypeScript code snippet: interface Stop { code: string } interface FareZone { name: string; stops: Stop[]; } const outbound: FareZone[] = [{name: 'Zone A', stops: [{ code: 'C00'}] }, {name: 'Zone B ...

javascripttypescript

The Route.ts file does not export any HTTP methods

Encountering an error while trying to migrate code from Next JS 12 with pages router in Javascript to Next JS 13 with TypeScript. ⨯ Detected default export in 'vibe\src\app\api\auth[...nextauth]\route.ts'. Export a name ...

typescriptauthenticationnext.jsnext-auth