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?

khex · Accepted Answer · 2019-08-15 18:31:14Z

4

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

edited Aug 15, 2019 at 18:31

khex

2,8387 gold badges36 silver badges57 bronze badges

answered Feb 17, 2017 at 7:42

Atal Kishore

4,8183 gold badges21 silver badges27 bronze badges

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

5 Comments

Carlos Torrecillas Over a year ago

I like the 1st and 3rd methods but how could I resolve a possible conflict with the main route that pulls back all the elements? I updated the question with the current routing I have

Atal Kishore Over a year ago

just scan for param(:id) if it is not undefined then only call the function to pull all the elements

Atal Kishore Over a year ago

this.route.params.subscribe(params => { if(params['id'] !=undefined){ this.id = +params['id']; // (+) converts string 'id' to a number pullElement(this.id); } });

Carlos Torrecillas Over a year ago

OK, but at the moment I have two different components, one for all elements bound to /elements and one for the detail element so that's the question I have I don't know how to add a third route to configure the add. Does that make sense?

Atal Kishore Over a year ago

then change the route url for getting all elements to element-list or some other meaningful name and then add these two routes

Mile Mijatović · Accepted Answer · 2019-10-09 17:29:08Z

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

Collectives™ on Stack Overflow

Angular2 reuse route for edit/add

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related