Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to bind a [routerLink] to a div? Angular 2+

I am new to Angular and I have found no clear answers on this subject no matter what I search for.

This is currently working:

<div class="col-sm" (click)="brandListRoute()"> 

which directs to this function in my component:

brandListRoute() {         this.router.navigate(['explore/brands']); } 

So this works perfectly, however when I first tried binding [routerLink] like this:

<div [routerLink]="['explore/brands']">  </div> 

I can click on the div but nothing happens. So my question is, does a [routerLink] only work on things like anchor tags and buttons or is my above logic flawed?

Need to find the best solution for my problem. Thanks so much in advance!

like image 214
Daniel Bailey Avatar asked Aug 31 '18 11:08

Daniel Bailey


People also ask

Is routerLink a directive?

In Angular, RouterLink is a directive for navigating to a different route declaratively. Router. navigate and Router. navigateByURL are two methods available to the Router class to navigate imperatively in your component classes.

Can't bind to routerLink since it isn't a known property of button?

You need to add RouterModule to imports of every @NgModule() where components use any component or directive from (in this case routerLink and <router-outlet> . declarations: [] is to make components, directives, pipes, known inside the current module.

Can we pass object in routerLink?

RouterLink for dynamic dataDynamic data or user-defined objects can be passed from Angular version 7.2 using the state object stored in History API. The state value can be provided using the routerLink directive or navigateByURL.

What is the difference between HREF and routerLink?

Href is the basic attribute provided by Html to navigate through pages which reloads the page on click. routerLink is the attribute provided by angular to navigate to different components without reloading the page.

Can I use routerLink on button?

Using Router linksAfter Angular v4 we can directly add a routerLink attribute on the anchor tag or button. Consider the following template, where routerLink attribute added to the anchor tag. The routerLink directive on the anchor tags give the router control over those elements.


1 Answers

Yes it can be attached to div tag, your route is probably wrong try add / in front of route.

<div [routerLink]="['/explore/brands']"> go to this location </div> 
like image 142
Nenad Radak Avatar answered Sep 20 '22 20:09

Nenad Radak