Angular2 reuse route for edit/add

Question

I'm fairly new to Angular2 and I'm trying to edit and add elements to my database. To edit them I configured elements/:id so that goes off to the DB and pulls the element back. You can update it and all good. However when I try to add, in theory I could have exactly the same form but I wouldn't have an id because that's assigned by the backend so I don't really know if I am overloading the element.detail.component and I should be creating a new one just for add.

I also thought in adding a new route like elements/addnew and give it priority over the one above or just have a complete new one.

Updated:

My routing so far:

{ path: 'elements', component: ElementsComponent },
{ path: 'elements/:id', component: ElementDetailComponent },

If I use the option of the query string how could I make a distinction between a new element and pull all elements according to the route above?

Answer 1

There is many ways you can achieve this with same component

1st method

use Query string to pass the value of id and if this query string is empty then just load the form with empty value and display the submit form button

2nd method

or you can simply pass id as 0 and scan for this value if it is 0 then load the empty form with submit button else display the details of the user

3rd method use routing as

{ path: 'elements', component: myComponent},
{ path: 'elements/:id', component: myComponent},

and in myComponent scan for param :id if it is present then only load the user data else load the empty form

Answer 2

You can use ActivatedRoute from @angular/router to easily check in which mode you are (for example new or edit mode)

Example:

recipe-edit.component.ts

export class RecipeEditComponent implements OnInit {

id: number;
editMode: boolean = false;

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    this.route.params.subscribe((params: Params) => {
        this.id = +params['id'];
        /**
         * Check if params has an ID property, 
         * if it has one, then this will actually be a string with the ID,
         * otherwise it will be undefined... By comparing it to null and checking if it is not null,
         * I am checking does it have the ID, because the ID will only be not undefined if we are 
         * in edit mode, because then an ID will be present.
         * 
         * So, if the ID indeed is undefined and therefore equal to null, this will return false because
         * I am checking the opposite and therefore, we are in new mode.
         */
        this.editMode = params['id'] != null;
    })
  }
}

app-routing.module.ts const appRoutes: Routes = [ { path: 'recipes', component: RecipesComponent, children: [ { path: '', component: RecipeStartComponent }, { path: 'new', component: RecipeEditComponent }, { path: ':id', component: RecipeDetailComponent }, { path: ':id/edit', component: RecipeEditComponent } ]} ];