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>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/6c75c4c0-c44b-4672-b7a6-64bd26e866afn%40googlegroups.com.
