replace main component content dynamically based on user selection in angular

Question

I have a main component in my angular project which should be updated and replaced with the data from all other components based on user selection from a component user.summary.component. My main component lies between header and footer and i have a left navigation called user.summary.component, where user makes selection between his profile information, card information, account preferences, orders.

When user selects profile information from user.summary.component , my main component should be updated with profile information details. Similarly card information, account preferences and orders information should replace main component content.

My main.component.html looks like this:

<p>
  main-body loaded!
</p>

<!-- multi slot transclusion here -->
<ng-content select="[body-content]"></ng-content>
<ng-content select="[body-header]"></ng-content>
<ng-content select="[body-footer]"></ng-content>

when user selects profile.information link from user.summary.component, profile.information.component should replace main component template content:

<app-main-body>

  <h4 body-content>  profile info body content here</h4>
  <h4 body-header> profile header here</h4>
  <h4 body-footer>  profile footer here</h4>

</app-main-body>

when user selects account.preferences link from user.summary.component, account.preferences.component should replace main component template content:

<app-main-body>

  <h4 body-content>  account preferences body content here</h4>
  <h4 body-header> account preferences header here</h4>
  <h4 body-footer>  account preferences footer here</h4>

</app-main-body>

I have gone through several posts on this blog and able to figure out how to pass the data from component to another component but not able to figure out how to replace main component content and inject a template based on user selection.

Angular 2 passing value between components

are you looking for routing? you can use a router to navigate to different child components, so if I have main component with header, dynamic component, footer, you can use a router to navigate to and from different components in the dynamic component area, the question was unclear to me so this may be way off base - but maybe it will lead to me understanding the question more. — TylerT
– TylerT, Commented Jun 26, 2018 at 14:20
Yes, you can do that with <router-outlet> and routermodule - this way you can place the <router-outlet> tag where you want the content and when you change the activated child route, it will change that content with the intended component and leave all the other dom elements on that html page alone, I'll leave this as a comment since it is not in depth and the alternate solution of switching components based on a var answered your question. — TylerT
– TylerT, Commented Jul 3, 2018 at 19:17

Boudi · Accepted Answer · 2018-06-26 14:56:57Z

1

I'm not sure if I did understand your issue but here are two ways to achieve this.

1) Using components with *ng-if

2) Using routing

But for both of these approaches, you'll need to create separate components for each of profile information, card information, account preferences, and orders.

If you want to do this using *ng-if here is how it is done.

main.component.html

<user.summary [onSectionChange]="changeSection($event)"></user.summary>

<profile.info *ngIf="selected == '1'"></profile.info>
<card.info *ngIf="selected == '2'"></card.info>
<account.pref *ngIf="selected == '3'"></account.pref>
<orders *ngIf="selected == '3'"></orders>

main.component.ts

selected: number = 1; // show profile.info by default
...
onSectionChange(section: number) {
  this.selected = section;
}

user.summary.component.ts

...
onSelectView(option: number) {
  this.onSectionChange.emit(option);
}

edited Jun 26, 2018 at 14:56

answered Jun 26, 2018 at 14:35

Boudi

1321 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

replace main component content dynamically based on user selection in angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related