Angular - Prevent to trigger onClick on "parent" element

Question

I have this (excerpt of a) template:

<custom-panel [summary]="summary.activity" routerLink="/activities">
  <a *ngIf="(user$ | async)?.verification.isOK" (click)="openQuestionModal()">Verify</a>
</custom-panel>

...and this "component" class:

// imports here

@Component({
  selector: 'custom-panel',
  templateUrl: './custom-panel.component.html',
  styleUrls: ['./custom-panel.component.scss']
})
export class CustomPanelComponent implements OnInit {
  public summary$: Observable<Summary>;
  public user$: Observable<User>;

  constructor(private service: UserService, private dialog: MdDialog) {
    // ...
  }

  public ngOnInit() {
    // Populate this.user$
    // Populate this.summary$
  }

  public openQuestionModal(): void {
    console.log('openQuestionModal() ...');
  }
}

The issue is: whenever I click on the link to open up the "Questions Modal" it also takes me to the /activities route (and eventually the modal dialog is opened there).

Is there any way to prevent this?

The only way I've found so far is to have a boolean "flag" and updating the [routeLink] directive to: [routerLink]="isActive() ? '/activities' : null". I would like to get rid of that "flag".

Lucas · Accepted Answer · 2017-07-07 19:56:03Z

1

Have you tried using stopPropagation ?

(click)="openQuestionModal($event)"

  public openQuestionModal(event): void {
    event.stopPropagation();
    console.log('openQuestionModal() ...');
  }

edited Jul 7, 2017 at 19:56

answered Jul 7, 2017 at 19:49

Lucas

10.4k6 gold badges45 silver badges55 bronze badges

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

1 Comment

user4695271 Over a year ago

Nope, I didn't try the stopPropagation thing. I like this one actually...thanks! Easy, huh?! :)

Collectives™ on Stack Overflow

Angular - Prevent to trigger onClick on "parent" element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related