Require data prior to initializing the angular constructor without using a resolver

Currently, I have a dialog service in place. In order to create the dialog component, I utilize viewContainerRef along with ComponentFactory.

Once the component is created, I proceed to set a default value for a specific property within this component.

 this.componentRef = viewContainerRef.createComponent(componentFactory);
 this.componentRef.instance.data = configData;

This component is a subclass of a base class (utilizing super).

Within this component, there is a virtual method which is called (inherited from the base class).

Despite my efforts to assign a default value, the instance remains unfilled at this point in time.

angulartypescript

Answer №1

It is common practice that you are unable to access input properties in the constructor. However, if you still need to do so, you can utilize an injector.

constructor(injector: Injector){};

const injector = Injector.create({
   providers: [{provide: 'data', useValue: this.configData}],
   parent: this.injector
})

this.componentRef = viewContainerRef.createComponent(componentFactory, {injector});

Then, within your component, you can access it as follows:

constructor(@Inject('data') data: any){
    // Your source code here;
}

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 the Implementation of Data Transfer Objects (DTO) in the Services File of a Nest

I am trying to retrieve data of a specific person from mongodb based on their username and password values, but instead of getting the data of that particular person, I am getting all the data from the database. Below is the code for the DTO: import {IsS ...

node.jsmongodbtypescriptnestjstypeorm

What is a more organized approach to creating different versions of a data type in Typescript?

In order to have different variations of content types with subtypes (such as text, photo, etc.), all sharing common properties like id, senderId, messageType, and contentData, I am considering the following approach: The messageType will remain fixed f ...

typescripttypescript-typings

Encountered a hitch while trying to start an angular 2 app using npm

Encountering an error while compiling the application with @angular/cli version 1.2.4 @angular/cli: 1.2.4 node: 8.11.1 os: win32 x64 @angular/animations: 4.3.6 @angular/common: 4.3.6 @angular/compiler: 4.3.6 @an ...

angularnpmnode-modules

Exploring Angular (5) http client capabilities with the options to observe and specify the response type as 'blob'

Situation: I'm facing a challenge in downloading a binary file from a backend system that requires certain data to be posted as JSON-body. The goal is to save this file using File-Saver with the filename specified by the backend in the content-disposi ...

angulartypescriptangular-httpclient

Opening a modal from a different component in Angular 6

I am attempting to launch a modal that is associated with a separate component. However, I encountered an error ERROR TypeError: Cannot read property 'show' of undefined Here is my code: product-catalog.component.html <app-cart-table-modal& ...

javascriptangularhtmltypescript

What is the best way to send an email with a time-sensitive code (token) using Firebase?

Currently, I am developing an application that requires sending a verification code to users before they can proceed with certain actions. For instance, when users log in to the app, they need to enter their email, password (authenticated using Firebase au ...

angularfirebase

What is causing the error to appear in my Jasmine unit test?

Embarking on my journey to implement an Angular Unit Test using Jasmine for the first time, I encountered a few challenges after referring to some examples. The crux of my issue lies in the implementation of the PeopleListComponent class which encapsulate ...

angularunit-testingjasmineangular-unit-test

Customize specific styles for individual divs one at a time (without the use of jQuery)

Can you assist me with this issue? I am trying to display the <span class="badge badge-light"><i class="fa fa-check-circle"></i></span> tag (initially set to "visibility: hidden") when clicking on a div with the class "role-box". He ...

javascripthtmlangular

Saving a JSON object to multiple JSON objects in TypeScript - The ultimate guide

Currently, I am receiving a JSON object named formDoc containing data from the backend. { "components": [ { "label": "Textfield1", "type": "textfield", "key": "textfield1", ...

jsonangulartypescript

Showing fetched data from Firebase in an Ionic 3 HTML file

Looking for assistance on how to display data retrieved from my firebase database in my HTML file. I need help with organizing the data, starting with displaying customer user's data. Eventually, I want to make it clickable and put the user's dat ...

htmlangularfirebaseionic-frameworkfirebase-realtime-database

Can you tell me about the interface type format used in the angular cli?

I found myself feeling disoriented while reading the documentation. ng generate interface <name> <type> There was ambiguity on what to input for the type field. Is it supposed to be a string, object, array, or can I define properties like ema ...

angularangular-cli

Leveraging es6-promise in conjunction with TypeScript 2.1 and ES5 Webpack for streamlined async/await functionality

Utilizing es6-promise with TypeScript version 2.1.1 that targets ES5 and webpack in my project has presented some challenges. app.ts import "es6-promise/auto"; export class Foo { bar() : Promise<string>{ return Promise.resolve("baz"); ...

typescriptpromisewebpackasync-awaitecmascript-5

Global Enum in Typescript that is Optimized for Inlining during Compilation

I'm facing a challenge with an enum that is widely used in my project. Having to import it into every file is becoming cumbersome. Is there a way to define the enum in the .d.ts file so that it automatically gets included when compiled to Javascript? ...

typescriptenums

Encounter a Typescript error when dealing with "app.ws" while using express-ws

I have a small project in mind where I want to create a BabyCam that can be accessed from any web browser using a Raspberry Pi Zero. My plan is to set up a web socket using express-is to stream video to multiple clients. I'm utilizing the raspivid-str ...

typescriptexpressraspberry-pi

Using TypeScript with Vue allows you to customize the default export of Vue

Currently experimenting with Vue and TypeScript, attempting to compile to AMD in my tsconfig file. The type definition in vue/types/index.d.ts for Vue.js includes: export default Vue; However, this results in TypeScript compiling it like this: import V ...

typescriptvue.jsamdtypescript-typings

Generating HTML content using Angular 8 and JSON data

Currently, I am managing an Angular Storybook that consists of various components. Within the stories.ts file of a component, there is a JSON snippet containing properties such as the content of a DIV element, shown below... { "accordionLink": ' ...

htmljsonangularinterpolationstorybook

Adapting Angular routes in real-time using observable state modifications

I am currently working on an Angular project that involves Angular routing. The code snippet below is extracted from my app-routing.module.ts file: // app-routing.module.ts: import { NgModule } from '@angular/core'; import { ActivatedRout ...

angularrxjsangular-routingangular-routerrxjs-subscriptions

Using Highcharts to dynamically color a map based on data values in a React TypeScript project

I'm attempting to generate a map where each country is filled with colors based on its specific data, similar to the example shown in this map. I am looking for a functionality akin to the use of the formatter function within the tooltip. I have expe ...

javascriptreactjstypescripthighcharts

Specify that a function is adhering to an interface

Is there a way in Typescript to ensure that a function implements a specific interface? For example: import { BrowserEvents, eventHandler, Event } from './browser-events'; export function setup(){ const browserEvents = new BrowserEvents(); b ...

javascripttypescriptfunctiontypes

Issues with sending emails through Nodemailer in a Next.js project using Typescript

I'm currently working on a personal project using Nodemailer along with Next.js and Typescript. This is my first time incorporating Nodemailer into my project, and I've encountered some issues while trying to make it work. I've been followin ...

javascriptreactjstypescriptnext.jsnodemailer