How to not apply [routerLink] on a child element?

angular 7 child routes
angular child routes not working
angular 6 get child route params
routerlink not working in child component
angular child routes example
routerlink angular
angular default child route
routing without router-outlet

I want to make a child element to trigger it own click even , and don't respond to it parent element having [routerLink], the problem is the child element can't run it delete() function in (click)="delete()" it just follow it parent in [routerLink] (it navigate to /product/:id)

    <div class="item">

<!-- parent element -->
    <a [routerLink]="['/product/'+product.id]">
        <div class="figure">
          <div class="sides">
            <div class="side">
              <div class="card">
<img class="img" [src]="product.thumb"> 
                <div class="content">
                  <div class="header">{{product.name}}</div>
                  <div class="meta"> <span>product.category</span> </div>
                </div>
                <div class="extraContent"> <span class="ui right floated black">

                <!-- child element -->
                <a (click)="delete()" ><i class="red trash outline icon"></i></a></span> <span><i class="deleteProductIcon"></i></span> </div> 
                <!-- child element -->

              </div>
            </div>
          </div>
        </div>
      </a>
<!-- parent element -->

</div>

I tried to move [routerLink] to an upper div but it still doing the same behavior

if you stopPropgation in the delete function() the event won't bubble up to the anchor tag with the routerLink

// pass in the event object to the delete function
<a (click)="delete($event)" ><i class="red trash outline icon"></i></a>

// in the delete function, stop event propagation
delete(event){
    event.stopPropagation();
}

Router: link to child component should go to default child route if no , I want to make a child element to trigger it own click even , and don't respond to it parent element having [routerLink], the problem is the child element can't run it  The Angular does this by watching the URL. Whenever the Url matches with the URL of the routerLink directive, it applies the classes defined in the RouterLinkActive directive. When it does not match it will be removed from the element. Using this we can apply different background or foreground color to our navigation links.

In your case the child just specifying stopPropagation might not work sometimes. Specially when child and parent both have their separate "routerLinks" defined

I suggest handling the routing using "navigate" method in component and returning "false" in the end. This would prevent parent route to trigger after completion of click handler of child.

// pass in the event object to the delete function
<a (click)="delete($event)" ><i class="red trash outline icon"></i></a>

// in the delete function, stop event propagation
delete(event){
    event.stopPropagation();
    this.route.navigate(['child/route/here']);
    return false;
}

returning false from click handler prevented the parent route to work for me.

Click on child routerLink does not trigger (click) on parent , Does this change remove the need to use the / syntax for nested routes? Example: @RouteConfig([ {path: '/heroes/', as: 'Heroes', component:  When linking to this user/:name route, you use the RouterLink directive. If the link is static, you can use the directive as follows: <a routerLink ="/user/bob">link to user component</a> If you use dynamic values to generate the link, you can pass an array of path segments, followed by the params for each segment.

the event.stopPropagation(); only, did not work for me. All I had to do was drop in e.preventDefault(); too

// In your HTML   
<a [routerLink]="['/product/'+product.id]">
     <!-- your other inner stuff -->
     <a (click)="delete($event)" ><i class="red trash outline icon"></i></a>
</a>

// In your component
delete(e){
    e.stopPropagation();
    e.preventDefault();
}

Defining Child Routes, You may use capturing event to handle it. You also could create event via rxjs thus event will not be destroyed with component if you are not  Angular Router Fundamentals: Child Routes, Auxiliary Routes, Master-Detail Last Updated: 24 April 2020 local_offer Angular Router In this post, we are going to do a guided tour of the main routing configuration concepts needed to use the Angular Router effectively.

Angular 2 Child Routes, Where would the components for these child routes be displayed? Just like we had a <router-outlet></router-outlet> for the root application component, we  The children property returns a collection of an element's child elements, as an HTMLCollection object. The elements in the collection are sorted as they appear in the source code and can be accessed by index numbers. The index starts at 0.

API Reference, The routerLink directives tells the Angular router which path to use, and the styles: [` div { padding: 10px; } .not-padded { padding: 0; } .border { border: 1px  from the official docs the RouterLink directive selector is :not(a):not(area)[routerLink] ( it means select all elements with routerLink attribute tha

In-app navigation: routing to views, If you don't, router-link will wrap its children in a span element. Sometimes we may want the active class to be applied to an outer element rather than the <a>  Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

Comments
  • i tried this : ` delete(event){ event.stopPropagation(); alert('deleted'); } ` and the alert() worked fine , but after this it still navigating to to /product/:id
  • @FlashCode can you switch up your DOM? Does everything in the parent element need to be wrapped in the routerlink? It seems kind of odd that clicking on anything in that element (other than the delete icon) would navigate to a new page. I would expect there to be a delete icon & a separate navigation icon
  • yeah you're right i should find a way to not wrap the delete icon and keep the others
  • it works ! i just moved [routerLink] to the upper div , thanks !