angular-dynamic-components | Frontend Framework library

I'm working on a component that lets a user dynamically enter rules, these rules can be of different types and dependent on the rule type different values will be captured.

I've got the dynamic components being created my problem is passing in the initial values to the dynamically created component.

The values are completely different from rule to rule so I'm trying to use the useValue in the injector but its not able to resolve the parameters if I add a parameter to accept the values in the constructor.

My injector for the components:

I implemented a dynamic form based on this tutorial. I'd like to add simple text inputs and a custom component (Mapbox GL JS) to a dynamic form.

My problem is that I can not access the Mapbox data. The Mapbox component implements a ControlValueAccessor but I don't know how to pass the information to the form.

I created a StackBlitz where you can find my setup: https://stackblitz.com/edit/angular-xrkftm

My goal was to display the form information (text input and Mapbox marker location) below the form.

I don't know where to add [formControlName]="config.name". Currently it's in the map.component.ts but I guess it needs to be implemented on the parent component.

based on this stack overflow post (Angular Dynamic Components: @ViewChildren get ViewContainerRef for every component in QueryList), I'm trying to add dynamic component in an ngFor.

The issue is that the ViewChildred referencing the ng template is always undefined

Here my template

I have a custom component popup.component.ts and I use it in each of my views' markup. It sits at the bottom being invisible. When I want to pop up a message, I just switch the bound field to this.poppyVisible = true and it shows.

I realized that I never have separate popups so it would make sense to add a method to my existing util.service.ts file that does the popping for me. But I get unsure if I can do that at all and if so, if I have to pass a reference to a view child or something.

Googling the issue leads to a lot of Material stuff showing that approach and that doesn't really enlightens me on my issue. There are other that build a whole service but one way or the other, they rely on 3rd party popups.

I only need to know how a general approach should be lain out. I fear that following hte wrong blog might lead me to bad habits.

Is it possible to have a service popup a component in a view? What should I google for to avoid the default Material/Kendo things that are clouding the view?

edit

Based on the comment, I feel I might clarify that I've done the research giving me suggestions on Angular CDK that sounds like the only option. I just feel I'm not certain that I actually got it right. I've found this blog that comes closely but has way too much overhead to filter out my answer, at least on my skill level.

I am getting the error: Cannot find module

I am following this tutorial to create dynamic forms in angular. The full code for the tutorial is on github Everything works nicely, but I want to add something where the parent component, which makes use of a Directive with ComponentFactoryResolver to dynamically create child components, is able to access the child components.

This is the Directive code:

I working on applying conditional field logic. Where two fields are dependant on their value.

Requirement: Let's say, we've a radio button with following values:

Do you want to format this code: o Yes o No

If user selects, No, nothing happens. If user selects Yes, there would be another field which will as:

Select formatting type: o HTML o PHP o Javascript

I'm using https://toddmotto.com/angular-dynamic-components-forms way for generating form, where we pass the settings to FormGroup and it generates a form.

Way I tried:

I followed the Todd Motto article about dynamic form with angular 2 (https://toddmotto.com/angular-dynamic-components-forms).

Every thing works perfectly.

But I have a project, project for pleasure, where I try to pass formatted array to config, this is the data :

I am new to angular2 and tried with dynamic form and its field generation by referring this URL. And i got the form as expected.

Since the dynamic form component render the field one by one using ng-container as shown below by loop it