CODEWITHSUNDEEP
angular
lemoine
lemoine

Reputation: 35

View button and routing in Angular

I think I have a road that is not good. In the Market > Value section, when I click on the Add button, I do not see the addition.component.html page. I have the impression that the button does not work?!

image

value.component.html

<div class="text-center">
   <button type="submit" class="btn btn-primary" (click)="btnAjout()">Add</button>
</div>

market-routing.module.ts

export const MARKET_ROUTES: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/value',
  },

  {
    path: 'value',
    component: ValueComponent,
  },
  {
    path: 'ajout',
    component: AjoutComponent,
  },

];

market.module.ts

@NgModule({
  imports: [CommonModule, MarketRoutingModule,  PipesModule,],
  declarations: [MarketComponent, ValueComponent],
})
export class MarketModule { }

value.module.ts

@NgModule({
  declarations: [
    AjoutComponent  
  ],
  imports: [
    CommonModule
  ]
})
export class ValueModule { }

Here is an illustration on Stackblitz. User toto & Password 1234.

Upvotes: 1

Views: 155

Answers (1)

Preetha Pinto
Preetha Pinto

Reputation: 342

In you code, when you navigateByUrl to ajout, it replaces the entire route with ajout. On click of the button use the below routing.

 btnAjout(): void {
    this.router.navigateByUrl('dashboard/market/ajout');
  }

Here is a Working StackBlitz

Upvotes: 1

Related Questions