pass id through url in angular

[chucho salazar]

Hello guys,

I started to learn angular and quite possible this is a silly question but I appreciate your help

I have a component with two buttons and I try to address to a new component once I click on one button using the id and routerLink but when I click the button I get an error in the explorer about:

"Error: Cannot match any routes. URL Segment: 'property-detail' "

If I remove the id settings in the html component and I enter the address in the explorer it goes to the right place but not with the id setting and clicking the button

in the app.module.ts I have created the routes and registered the new component "PropertyDetailComponent". Please, follow the code

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { BrowserModule } from '@angular/platform-browser';

import {HttpClientModule} from '@angular/common/http'

import {Routes, RouterModule} from '@angular/router';

import { AppComponent } from './app.component';

import { PropertyCardComponent } from './property/property-card/property-card.component';

import { PropertyListComponent } from './property/property-list/property-list.component';

import { NavBarComponent } from './nav-bar/nav-bar.component';

import { HousingService } from './services/housing.service';

import { AddPropertyComponent } from './property/add-property/add-property.component';

import { PropertyDetailComponent } from './property/property-detail/property-detail.component';

const appRoutes: Routes = [

  {path:'', component: PropertyListComponent},

  {path:'rent-property', component: PropertyListComponent},

  {path:'add-property', component: AddPropertyComponent},

  {path:'property-detail/:id', component: PropertyDetailComponent}

]

@NgModule({

  declarations: [

    AppComponent,

    PropertyCardComponent,

    PropertyListComponent,

      NavBarComponent,

      AddPropertyComponent,

      PropertyDetailComponent

   ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpClientModule,

    RouterModule.forRoot(appRoutes)

  ],

  providers: [

    HousingService

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

then, in the html component I have this code:

<div class="card">

  <div class="card-img-wrapper">

    <img  class="card-img-top" src="assets/images/house_default.png" />

    <ul class="list-inline text-center member-icons animate">

      <li class="list-inline-item">

        <button class="btn btn-primary" routerLink="/property-detail/{{property.Id}}"><i class="fa-solid fa-pen-to-square"></i></button>

      </li>

      <li class="list-inline-item">

        <button class="btn btn-primary"><i class="fa-solid fa-address-book"></i></button>

      </li>

    </ul>

  </div>

  <div class="card-body p-2">

    <h1>{{ property.Name }}</h1>

    <h2>{{ property.Type }}</h2>

    <h3>{{ property.Price }}</h3>

  </div>

</div>