I am working on an Angular component that consists of nested div elements. My goal is to trigger a click event on the parent div, however, I want to ensure that if the menu child div is clicked, the parent div's click event should not be triggered.
main.ts
@Component({
selector: 'app-root',
standalone: true,
template: `
<div (click)="openAlert()" class="parent">Parent
<div class="menu">Menu</div>
<div class="child child-2">Child 2</div>
<div class="child child-3">Child 3</div>
</div>
`,
})
export class App {
name = 'Angular';
public openAlert() {
alert('Details View');
}
}