replace main component content dynamically based on user selection in angular

Issue

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

Solution

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);
}

Answered By – Boudi

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.