Typescript 3 Angular 7 StopPropagation and PreventDefault not working : <p>I have a text input inside a div. Clicking on the input should set it to focus and stop the bubbling of the div click event. I've tried the <code>stopPropagation</code> and <code>preventDefault</code> on the text input event but to no avail. The console logs shows that the div click still executes regardless. How to stop the div click event from executing?</p>

<pre><code>// html
&lt;div (click)="divClick()" &gt;
  &lt;mat-card mat-ripple&gt;
    &lt;mat-card-header&gt;
      &lt;mat-card-title&gt;
        &lt;div style="width: 100px"&gt;
          &lt;input #inputBox matInput (mousedown)="fireEvent($event)" max-width="12" /&gt;
        &lt;/div&gt;
      &lt;/mat-card-title&gt;
    &lt;/mat-card-header&gt;
  &lt;/mat-card&gt;
&lt;/div&gt;


// component
@ViewChild('inputBox') inputBox: ElementRef;
divClick() {
    console.log('click inside div');
}

fireEvent(e) {
    this.inputBox.nativeElement.focus();
    e.stopPropagation();
    e.preventDefault();
    console.log('click inside input');
    return false;
}
</code></pre>
