angularoutputcomponentsangular4-formsdynamic-ui

Angular 4 Dynamic component loading & emitting data to parent component


I am on process of creating poc for dynamic form generation using custom components.

i have succeeded upto some extent, where i can create form using set of dynamic components according to a json array. Now i am stuck in one instance where i just need to get output or rather the data out of these components ones the user have update the relevant inputs.

I had a look at the @output decorator and the eventEmitter yet i couldn't get a proper solution out of it. Much appreciate if any one in the community could give me some headsup :)

please follow the PLUNKER to view the current progress and my approach.


Solution

  • You are on the right track, There are two approaches you can use here

    (i) Service

    (ii) Using eventEmitter - output decorator

    Since the components are dynamic you can always subscribe and the service can send the data back to app.ts.

    Inorder to get an idea have a look at this Passing Input while creating Angular 2 Component dynamically using ComponentResolver

    In your example, I modified service addDynamic component method and added Output events to each component, that will belongs to app.ts

    DEMO