CODEWITHSUNDEEP
angularangular2-routing
lemoine
lemoine

Reputation: 35

Angular: Click button to redirect to another page not working

In the Market > Value page, I have a button named add, when the user clicks on this button, the user goes to another page. This page is named ajout.

Here is the structure

structure

value.component.html

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

value.component.ts

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

market-routing.module.ts

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

ajout.component.html

<p>ajout works!</p>

The ajout page is not working, did I make a mistake?

Code Stackblitz

Upvotes: 1

Views: 6178

Answers (1)

Yong Shun
Yong Shun

Reputation: 51260

Issue 1: Unable fire btnAjout method

btnAjout is a function. Hence with (click)="btnAjout", it never trigger the btnAjout function.

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

btnAjout(): void {
  ...
}

Solution for Issue 1

Correct the click event.

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

Issue 2: Incorrect routing to 'market/ajout'

From reviewing DashboardRoutingModule to MarketingRoutingModule, (to redirect) adjout component's URL should be:

/market/adjout

Instead of:

this.router.navigateByUrl('/ajout');

Solution for Issue 2

Correct the url path.

this.router.navigateByUrl('/market/ajout');

Sample Solution on StackBlitz

Upvotes: 3

Related Questions