Angular click event in div element not work

Question

I just want to test the click event in div element and it doesnt works

So here is the part of code in html and ts files :

HTML:

<div class="col-md-3 mx-auto d-flex flex-row justify-content-center align-items-center" 
                style="height: 200px; background-color: rgba(100, 100, 179, 0.1); position: relative;"
                (click)="goToInvoices()"
            >
                <h2>Invoices</h2>
            </div>

TS :

// i've tried to add also :any for return type
goToInvoices() {
  this.router.navigate(['/invoices']).then(nav => {
      console.log(nav); // true if navigation is successful
  }, err => {
     console.log(err) // when there's an error
  });
}

In console nav is null !!!

app.module.ts:

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: '**', redirectTo: 'home', pathMatch: 'full'},
  {path: 'invoices', component: InvoicesComponent},
];

Angular version : 9.1.7

did you import RouterModule inside the component's module ? — Supun De Silva
– Supun De Silva, Commented May 28, 2020 at 11:36
You get any error on your console? Did you try to add a breakpoint on your function to see if get in there? — Tzimpo
– Tzimpo, Commented May 28, 2020 at 12:00
I rewrite the method like this : goToInvoices() { this.router.navigate(['/invoices']).then(nav => { console.log(nav); // true if navigation is successful }, err => { console.log(err) // when there's an error }); } and in console nav is null i dont know why — Tchiko
– Tchiko, Commented May 28, 2020 at 12:02
router-outlet missing. this is where the routed content get rendered. Check stackBlitz below — Supun De Silva
– Supun De Silva, Commented May 28, 2020 at 12:08

Supun De Silva · Accepted Answer · 2020-05-28 12:07:25Z

3

You are missing the router-outlet

Check the following

https://stackblitz.com/edit/angular-ivy-6g2tky

answered May 28, 2020 at 12:07

Supun De Silva

1,48712 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tzimpo · Accepted Answer · 2020-05-28 12:14:41Z

0

On your app.component.html add this :

<router-outlet></router-outlet>

answered May 28, 2020 at 12:14

Tzimpo

1,0072 gold badges11 silver badges28 bronze badges

Collectives™ on Stack Overflow

Angular click event in div element not work

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related