use same component for different routes with different output

Question

In my application I like to create a master (CRUD) for physician. I have a physician component for creating, editing and listing. A separate component for viewing it. I would like to URL's like

physician/create

physician/list

physician/edit/3

So I created route with children

const routes: Routes = [
{
  path: 'physician',
  children: [
    { path: 'list', component: PhysicianComponent },
    { path: 'create', component: PhysicianComponent },
    { path: 'update/:id', component: PhysicianComponent },
    { path: 'view/:id', component: PhysicianViewComponent }
  ]
}

For create, update and list I want to use the same component, but different output using some conditions inside the component class

yes you can generate nested components – Mohd Tabish Baig May 14 '18 at 07:22 — Mohd Tabish Baig, May 14 '18 at 07:22

score 30 · Accepted Answer · edited Sep 06 '20 at 08:27

Yes, by using the ActivatedRoute service and by that you check route parameters and router url to check which condition to apply but that is hard to maintain. Imagine, you just change the url or change the parameter name so you need to change that at the component. Another way is to add data property to each route something like a flag and based on that flag you apply specific conditions-

const routes: Routes = [
{
  path: 'physician',
  children: [
    { path: 'list', component: PhysicianComponent, data: { kind: 'list' } },
    { path: 'create', component: PhysicianComponent, data: { kind: 'create' } },
    { path: 'update/:id', component: PhysicianComponent, data: { kind: 'update' } },
    { path: 'view/:id', component: PhysicianViewComponent, date: { kind: 'view' } }
  ]
}

component:

ngOnInit() {
  this.activeRoutedService.data.subscribe(data => {
    switch (data.kind) {
      //....
    }
  });
}

Nice, I like this option. I'm considering the options like whether to have a different components for different needs or same component with different conditions. Scratching my head on whether to go with more components or more conditions. — Abel, May 14 '18 at 09:27

Joshua Chan · Answer 2 · 2019-12-21T00:16:55.140

You can set route data and get the data in your component to show different output:

{ path: 'list', component: PhysicianComponent, data: { viewOption: 'list' } },
{ path: 'create', component: PhysicianComponent, data: { viewOption: 'create' } },
{ path: 'update/:id', component: PhysicianComponent, data: { viewOption: 'update' } },

In your component, get the data from ActivatedRoute.snapshot.data

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    this.viewOption = this.route.snapshot.data.viewOption;
}

score 4 · Answer 3 · edited Jun 29 '20 at 09:53

You can use the ngSwitch

In your controller, decide what is the route

whichView: string;
constructor(private router: Router) {
  if (this.router.url.endsWith('physician/create')) {
    this.whichView = 'create';
  } else if (this.router.url.endsWith('physician/edit')) {
    this.whichView = 'edit'
  } else {
    this.whichView = 'view'
  }
}

In view:

<container-element [ngSwitch]="whichView">
  <some-element *ngSwitchCase="create">...</some-element>
  <some-element *ngSwitchCase="edit">...</some-element>
  <some-other-element *ngSwitchCase="update">...</some-other-element>
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

score 1 · Answer 4 · edited Jun 30 '20 at 04:19

You can have only one component and handle the operation to do based on the URL, but I think it isn't the best solution.

If I was you, I would create different components for each page, with their own template and their own functions.

If you don't want to do so, you will have to use a lot of conditions in your template, and in your component's logic. For instance :

constructor(private router: Router) {}

get route() { return this.router.url; }

onFormButtonClick() {
  if (this.router.url.endsWith('physician/create')) { /* ... */ }
  else if (this.router.url.includes('physician/edit/')) { /* ... */ }
}

And in your comoponent

<ng-container *ngIf="route.endsWith('physician/create')">...</ng-container>
<ng-container *ngIf="route.includes('physician/edit/')">...</ng-container>

use same component for different routes with different output

4 Answers4