Angular2 boasting its recursive dynamic template compilation

My work is inspired by a similar issue discussed here:

creating and compiling dynamic Components with Angular 2.0

How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

The functional plunker mentioned in the question above is available here.

An error arises when attempting to create another dynamic view within dynamic-detail in the template, resulting in the following exception:

'dynamic-detail' is not a known element: 1. If 'dynamic-detail' is an Angular component, then verify that it is part of this module.

This issue can be replicated by modifying the logic in the plunker to generate a dynamic template that includes "

<dynamic-detail></dynamic-detail>
".

In the file "app/dynamic/template.builder.ts" I made the following code adjustment:

      let editorName = useTextarea 
    ? "text-editor"
    : "string-editor";

To

      let editorName = useTextarea 
    ? "dynamic-detail"
    : "string-editor";

After making this change, I encountered the aforementioned exception. It seems the compiler struggles with recognizing dynamic-detail when used recursively.

I have attempted to import DynamicDetail into various modules without success. Perhaps this is not the correct approach for resolving the issue.

Answer №1

If you switch from using "text-editor" to "dynamic-detail", your template will be transformed into this:

<form>
  <dynamic-detail
     [propertyName]="'code'"
     [entity]="entity"
   ></dynamic-detail>
   <dynamic-detail
      [propertyName]="'description'"
      [entity]="entity"
   ></dynamic-detail>
</form>

The DynamicDetail component initially does not come equipped with propertyName and entity properties, so you will need to add them in.

detail.view.ts

export class DynamicDetail implements AfterViewInit, OnChanges, OnDestroy, OnInit
{ 
    @Input()  public propertyName: string;
    @Input()  public entity: any;

The second part of the solution involves incorporating this component into the RuntimeComponentModule:

type.builder.ts

protected createComponentModule (componentType: any) {
  @NgModule({
    imports: [ 
      PartsModule,
      DynamicModule.forRoot() // this line
    ],
    declarations: [
      componentType
    ],
  })
  class RuntimeComponentModule {}

  return RuntimeComponentModule;
}

Once these changes are made, everything should function as expected. Check out a working example on Plunker Example

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

Guide on integrating TLS into a specific context path within a Tomcat server

Is it possible to add TLS to a specific context path in a Tomcat server instead of applying it to a port? I have set up a Spring Boot gateway service and an Angular app on the same port within Tomcat, each with its own unique context path. I would like to ...

Angular 2+: The art of creating an instance of a class using data retrieved from the backend

Within my Angular app, I have a Customer class and an ICustomer interface. interface ICustomer { <-- obtained from backend id: number; name: string; address: string; // additional properties } class Customer { <-- widely used in th ...

In what way can TS uniquely handle each element of an array as the key of an object?

I am struggling with an object that I need to have keys representing every item in the array, each linked to a value of any. Can anyone provide guidance on how to achieve this? Unfortunately, I couldn't find a solution. Here is an example for refere ...

Exploring Typescript: Combining types (rather than intersecting them)

Let's analyze the scenario below type MergeFn = <K1 extends string, V1, K2 extends string, V2>( k1: K1, v1: V1, k2: K2, v2: V2 ) => ??? let mergeFn: MergeFn // actual implementation doesn't matter for this question What should b ...

Angular2 Release Candidate 4 now uses ngModelChange event instead of keypress for form input

Is it possible to trigger a function upon the input's onchange event without firing every time a key is pressed, similar to how knockout does it by default? <input [ngModel]="whatever" (ngModelChange)="something($event)"> I understand that I c ...

Steps for displaying a loader after refreshing data using queryClient.invalidateQueries:1. Utilize the query

I am currently working on a project where I need to redirect to a specific page after updating an item. While the code is functioning correctly, I have encountered an issue with the loader not displaying. export const useUpdateStatusArchiveSurvey = () => ...

Converting JSON to objects in Angular 2 using Typescript

Being new to Angular2 and Typescript, I am currently in the learning phase. I am trying to retrieve data from a REST service and then populate a list with this data obtained from the service. The API link I am using is http://jsonplaceholder.typicode.com/u ...

What is the best way to specify the return type of a currying function?

Check out this currying function I've implemented: export interface NewIdeaCardSubmit { title: string, description: string, categories: CategoryValues } const applyInputs = (title: string) => (description: string) = ...

A parameter in Typescript must be provided if another parameter is set to true

Need help with TypeScript function parameters: myFunction(allData: Array<any>, selectedItems: Array<any>, onlyValues: boolean = false, values: Array<any>) { console.log(allData); console.log(selectedData); console.log(onlyValu ...

Dealing with undefined arrays in Angular across multiple templates: Best practices

I'm currently developing a search screen for an application and I've come up with three possible outcomes for the results section. If the user hasn't searched yet, then show nothing. If the user searches and the array is empty, display "no ...

Utilizing Material-UI with MobileDialog HOC in TypeScript: A Beginner's Guide

I'm running into an issue while trying to implement withMobileDialog in my TypeScript code. Below is the snippet of my code, inspired by a code example from the official documentation. import withMobileDialog, { InjectedProps } from "@material-ui/co ...

Tips for combining the values of arrays with identical object IDs in Angular 6

Receiving a response from my angular project here const testArray = [ {PackageID: 7, FormsList: [{Form_Name: "string One"}]} {PackageID: 7, FormsList: [{Form_Name: "string Two"}]} {PackageID: 7, FormsList: [{Form_Name: "string Three"}]} {PackageID: 11, F ...

Enhance your TypeScript code using decorators with inheritance

Exploring the realm of Typescript decorators has led me to discover their intriguing behavior when combined with class inheritance. Consider the following scenario: class A { @f() propA; } class B extends A { @f() propB; } class C exten ...

How can you implement Higher Order Components as a decorator in TypeScript?

Currently, I am attempting to develop a decorator that accepts an argument from React's Context provider. When creating a higher-order component (HOC), the process is straightforward: interface DashboardProps { user: User; } class Dashboard exten ...

Discover the simple steps to include row numbers or serial numbers in an angular2 datagrid

Currently, I am utilizing angular2 -datatable. Unfortunately, I am facing an issue where the correct row numbers are not being displayed in their corresponding rows. Whenever a user moves to the next page using the paginator, the datatable starts countin ...

employing constructor objects within classes

I am attempting to utilize a class with a constructor object inside another class. How should I properly invoke this class? For example, how can I use Class 1 within Class 2? Below is an instance where an object is being created from a response obtained f ...

Variable TemplateRef Usage in Angular

I could really use some assistance or guidance with this issue. My project is built on Angular 8. I'm puzzled by how the initialization of "this.templateRef" is handled in the time.directive.ts file. It seems like it's not initialized anywhere. C ...

Steps for sending JSON data to a specific endpoint in an API

I recently developed a simple API using Node.js. Here is the code snippet: const Post = require('../models/article'); ... router.post('/contribute', (req, res) => { console.log('Adding new article'); let userPost = ...

Utilize tree-shaking functionality within your TypeScript project

In the process of developing a TypeScript telemetry library using OpenTelemetry, I am exploring ways to incorporate tree-shaking to allow consumers to selectively import only the necessary modules and minimize the overall bundle size. The project directory ...

Error 404: Angular version 18 - Request not found

After upgrading my Angular application to version 18 (18.0.1), I've encountered issues with http requests on localhost. The majority of my requests are returning a 404 error. I am operating behind a corporate proxy and have a configuration file in pla ...