Hi LJ,
I would include each unique component once and have the parent control
which view to use as well as which model to write into. This would allow
the parent to control which component is in view and which model that
component should write into. This way, the parent could display the same
component multiple times (after clicking Next) with different sets of value.

So, your component might look like this:

*MyComponent.component.ts*
class MyComponent {
    currentPage = 'component1';
    currentInstance = 0;
    currentModel: any;
    wholeModel = {
        // a singleton - only one instance of this page
        component1: {},
        // a multiple - multiple instances of this "page"
        //  can be modified programmatically as needed, ex.
        //  when the user changes selections
        component2: [{},{},{},{},{}]
    };

    onNext() {
        // figure out which component should be in view and set the
condition that controls it
        // most of this could be generalized around the wholeModel property
        switch(this.currentPage[0]) {
            case 'component1':
                this.currentPage = 'component2';
                this.currentInstance = 0;
                this.currentModel = this.wholeModel['component2'][0];
                break;
            case 'component2':
                if (++ this.currentInstance <
this.wholeModel['component2'].length) {
                    this.currentModel = this.wholeModel['component2'][
this.currentInstance];
                    return;
                }
                this.currentPage = 'summary';
                this.currentInstance = 0;
                this.currentModel = null;
                break;
           case 'summary':
                // file your data somehow ...
        }
    }
}

*MyComponent.component.html*
<component1 *ngIf="currentPage[0] === 'component1'"
[model]="currentModel">...</component1>
<component2 *ngIf="currentPage[0] ===
'component2'" [model]="currentModel">...</component2>
<component3 *ngIf="currentPage[0] ===
'summary'" [model]="wholeModel">...</component3>



On Fri, Nov 17, 2017 at 1:34 PM LJ <lucky.jin...@gmail.com> wrote:

> I need some help and its kins of important for me to fix this functionality
>
> We have pages flow like 1->2->3->4->5. All pages are defined as angular
> components in a form module. We have next /previous on each page and option
> to save the (drafts) at each page. With save, we will combine model objects
> on all the tracked previous pages + current page and save to DB. ( not
> using reactive forms)
>
> Then problem right now -
> At page say 3, we have huge nested kind selection menu ( like burgers,
> kind of burgers or sandwich, what kind and number of burgers etc)
> We select those, and then based on it,  if 10 items selected on menu page,
> some pages say A,B,C,D, should appear in loop 10 times.
>
> How to implement this feature? Should I create sub module of A,B,C,D and
> have components in it instead of having them at same level.
>
> We may add bread crumbs later, and I think that design might help angular
> breadcrumbs.
> 1->2->3-> (A-b-c-d reapting n times) ->4->5
>
> --
> You received this message because you are subscribed to the Google Groups
> "Angular and AngularJS discussion" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+unsubscr...@googlegroups.com.
> To post to this group, send email to angular@googlegroups.com.
> Visit this group at https://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>
-- 
Lucas Lacroix
Computer Scientist
Advanced Technology Division, MEDITECH <http://ehr.meditech.com/>
781-774-2293

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to