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.