Angular: Navigation to the requested Id

Question

I have a form for adding a name I want to add the user and navigate to the next page with his id. for example:

And on the page I get navigation to another page with Url:

http://localhost:4200/contact?id=5b07d5ec-627b-45f6-8361-becb9a742d40

I have a problem with one line of code:

addContact(){

      this.contactsService.GetAllContacts()
    .subscribe(res=> {
        const contact = res.find((a:any)=>{
        return a.displayName === this.contactForm.value.displayName
      });

      if(contact){
        this.contactsService.AddContact(this.contactForm.value)
        .subscribe(() => {
        alert("Signup Succssfull");
        this.contactForm.reset();
        this.router.navigate(['contact'] , { queryParams: {id: contact?.id}});
  })
 }})
}

In this function the problematic line of code is:

const contact = res.find((a:any)=>{
return a.displayName === this.contactForm.value.displayName

Because I only check if I have such a Name then send it to his URL with the ID But I do not want an existing user I want a new user I create it as soon as I do ADD get a new ID I just did not find a suitable function of all the functions

New Edit:

Routing:

export const routes : Routes = [
  {path:'',redirectTo:'login',pathMatch:'full'},
  {path:'login' , component:LoginComponent},
  {path:'signup', component:SignupComponent},
  {path:'home', component:HomeComponent},
  {path:'help', component:HelpComponent},
  {path:'game', component:GameComponent},
  {path:'app',component:AppComponent},
  {path:'default',component:DefaultLayoutComponent},
  {path:'contact',component:ContactComponent},
  {path:'details',component:DetailsComponent},
  {path:'test',component:TestComponent},
  {path:'addContact',component:AddContactComponent},
  {path:'**' , component:NotFoundComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

NgOnInit:

ngOnInit(): void {
    
    
    this.route.queryParamMap.subscribe(
      params =>{
        const id = params.get('id');
        
        if(id){
          this.contactsService.GetContact(id)
          .subscribe(
            response =>{
              this.contact = response;
            }
          )
        }
      }
    )
}

I added to the post the routing addcontact this is the form in the picture and I want it to navigate to contact by ID — Tommy Udi, Jul 05 '22 at 19:29

score 0 · Answer 1 · answered Jul 05 '22 at 19:35

0

Try to change your app-routing.component.ts like this:

  {path:'contact/:id',component:ContactComponent},

And in the "parent" component, where you press the button make something like this:

   <button [routerLink]="['/contact', contact.id]">Add </button>

and then in the contactComponent.ts in the beginning of the NgOnInit() {} write this:

this.id = this.route.snapshot.paramMap.get('id');

Something like this.. Look at the dynamic routing. Its hard to perfectly write working solution without demo. If you have time, make StackBlitz demo for us

answered Jul 05 '22 at 19:35

devZ

606
1
7
23

I'll try what you said – Tommy Udi Jul 05 '22 at 19:39
I did not understand where to put it **this.id = this.route.snapshot.paramMap.get ('id');** In my code – Tommy Udi Jul 05 '22 at 19:43
Can you explain to me how I put this line of code into the code? I can not understand – Tommy Udi Jul 06 '22 at 04:04
Does your code successfuly re-route you to the next page with specific info? You put this in the beginning of the NgOnInit so you can fetch the ID from te url and then re-use the specific ID – devZ Jul 06 '22 at 05:40
I forgot to add my NGONINIT, I will now show you it in the POST – Tommy Udi Jul 06 '22 at 05:41
I added you can look – Tommy Udi Jul 06 '22 at 05:42
I get id null And my URL is contact / null – Tommy Udi Jul 06 '22 at 05:46
Please create stackblitz duplicate – devZ Jul 06 '22 at 12:34

Angular: Navigation to the requested Id

1 Answers1