Could there be a delay in the view rendering caused by passing Input() arguments to a dynamic component?

In my application, I am using a list view where clicking on a list item triggers the injection of a new component below it to create a view/edit window. The method I use for dynamic component creation is as follows:

private alertViewEditFactory(cRef: ViewContainerRef, alert: Alert, mode: number): ComponentRef<AlertViewEditComponent> {
    const ref = cRef.createComponent(this.factory);

    // Is there a risk of the component rendering before input arguments are set?
    ref.instance.mode = mode;
    ref.instance.alert = alert;
    ref.instance.service = this.userService;

    return ref;
}

Here, mode, alert, and service are all declared as @Input().

Query: Could there be a scenario where setting input arguments after component creation leads to the view rendering before the arguments are applied? While this hasn't occurred in my experience so far, I'm curious if there might be a more secure approach for creating the component and simultaneously setting input arguments.

Answer №1

Before you call detectChanges() on the component ref's change detector, the Inputs are not projected into the DOM along with angular expressions in the template. This action triggers init, content init, and view init, as well as respective checks. You can achieve this by using

ref.changeDetectorRef.detectChanges()
. For more information on lifecycle hooks, visit here.

When you only use createComponent, it simply instantiates the component and renders basic markup without evaluating angular expressions to its parent view container. For more details on this, check out this link. Therefore, do not rely on having the inputs initialized when the constructor is called.

Creating dynamic components should not pose any problems. In Angular's component lifecycle, the instance is always created first, followed by rendering the bare markup. Only after that are the template expressions evaluated along with any inputs used in the template.

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

Optimizing the sorting of object properties based on specific values (numbers or strings)

My goal is to simplify the process of sorting both number and string values. The first step involves checking if the parameter I've passed (which belongs to the DeliveryDetailsColumns constants) matches another parameter from a different type (Electro ...

What is the source of Docker's node version information?

Within the Dockerfile, I specified the version node:14.17.6-alpine3.13. However, in the deployment log, it shows a different version, node:16.13.2-alpine. Can anyone shed light on why this discrepancy exists and how to rectify it? docker-compose deploy lo ...

The error "Property 'push' does not exist on type '() => void'" occurs with Angular2 and Typescript arrays

What is the method to initialize an empty array in TypeScript? array: any[]; //To add an item to the array when there is a change updateArray(){ this.array.push('item'); } Error TS2339: Property 'push' does not exist on type &a ...

Cypress symbolizes the logical OR condition within a repeating loop

I am currently facing a challenge with testing the input values of a table. I am struggling to represent the OR condition and skipping a specific cell within the table. The table is cyclic in nature, where all values are positive except for one cell that a ...

Having trouble resolving the typescript package while integrating with another module

Attempting to develop a basic npm package with TypeScript and bundle it using webpack. When trying to use the package in another module, such as a react application named 'module A.' Within module A, the 'myLibrary' package is installe ...

Encountering a issue while running npm start with Angular 2 RC build

After upgrading from Angular2 beta 15 to the RC version, I encountered some errors while trying to run my application. typings/browser/ambient/es6-shim/index.d.ts(8,14): error TS2300: Duplicate identifier 'PropertyKey'. typings/browser/ambient/e ...

Surprising Discovery: TypeScript - node_modules Found in Unusual Directory

Is there a way to make TypeScript imports function properly even if the node_modules directory is not directly in the tree? How can I prevent TypeScript from throwing errors when importing something like rxjs from external/node_modules. For Example: Dir ...

Integrating Octokit middleware in Next.js for enhanced functionality

Currently, I am in the process of honing my skills by creating a GitHub app. In Octokit, there is a feature called createNodeMiddleware that caught my attention. However, integrating it with next.js seems to pose some challenges. My main issue right now re ...

"Exploring the relationship between Vue checkbox components: parent and

Currently, I am working on a checkbox group where the behavior is such that if the parent checkbox is checked, all the child checkboxes will also be checked. Similarly, if a child checkbox is checked, the parent checkbox should also get checked, and so on. ...

Enhance Angular Material Select with Tooltip on Ellipsis Directive

In the midst of my Angular 9 project journey, I encountered a directive designed to add a matTooltip if an element's text is truncated (ending in ellipsis due to overflow). Everything was running smoothly with this directive until I introduced a mate ...

Angular5: Dealing with View Encapsulation Problems

When applying CSS to child components called from a parent component using the ViewEncapsulation.None trick, everything seems to work fine. However, when navigating to other routes or pages, the styles of the component with ViewEncapsulation.None are stran ...

Developing a state object encompassing all the columns of a data table for sorting purposes in React JS

Trying to create a state object to maintain field names and sorting types (ascending/descending). Implementing server-side sorting by passing the column name and sort type (asc or desc). I have a component for a data table with click handlers to determin ...

After installing the latest version of Node.js, the stability of the Ionic environment

After updating nodejs from v8.1 to v12, my ionic environment is experiencing instability. Any suggestions on what needs to be updated? [abc]$ ionic cordova emulate android When running ng run app:ionic-cordova-build --platform=android, an unhandled exce ...

Transaction response for embedded iFrame with Accept.js on Authorize.net

I've recently integrated authorize.net accept.js embedded iFrame into my application, but I'm facing difficulties in setting the transaction response in my lambda function to retrieve the expected data. Although I've checked similar queries ...

Using Angular 2 to trigger an event when a native DOM element is loaded

I am working towards my main objective of having a textarea element automatically focused upon creation. I recently came up with an idea to use e.target.focus() on the onload event. It would look something like this: <textarea rows="8" col="60" (load)= ...

I've added a check, so why is TypeScript still complaining about the possibility of my property being undefined?

const handleLinkClick = (index: number) => () => { const hasUrl = !!searchItems[index]?.url; if (hasUrl) { navigateToLink(searchItems[index]?.url); } else { setItemSelected(index); } }; However, the issue I encountered is: (property) ...

Automatically activate the Focus Filterfield in the ng-multiselect-dropdown upon clicking

I've integrated the ng-multiselect-dropdown package into my Angular project using this link: https://www.npmjs.com/package/ng-multiselect-dropdown. Everything is functioning as expected, but I'm looking to automatically focus on the filter input ...

Translating from a higher-level programming language to a lower-level programming language

Is compilation effectively the transformation of high-level programming languages (HLL) into machine code or low-level language? If so, why is TypeScript (a HLL) compiled to JavaScript (also a HLL) instead of being compiled to a low-level language? ...

How can Angular JS handle multiple validators being triggered at once?

Hey there, I'm currently working with validators in my Angular form setup. Here's a snippet of how it looks - I utilize Validators.compose to combine custom validators. The errors from these validators are then displayed on the HTML component. My ...

Exploring the functionalities of Angular routing by incorporating parameters

Greetings! I have developed a straightforward Angular 12 project featuring a login page and a home page. Below is the code structure for your reference: <div class="text-center" style="width: 100%"> <h1>home</h1> & ...