ipsos-components/src/demo-app/focus-origin/focus-origin-demo.html

Material Design components for Angular

<button #b class="demo-focusable" cdkMonitorElementFocus>focus me!</button>
<button (click)="b.focus()">focus programmatically</button>

<button (click)="fom.focusVia(b, 'mouse')">focusVia: mouse</button>
<button (click)="fom.focusVia(b, 'touch')">focusVia: touch</button>
<button (click)="fom.focusVia(b, 'keyboard')">focusVia: keyboard</button>
<button (click)="fom.focusVia(b, 'program')">focusVia: program</button>

<div>Active classes: {{b.classList}}</div>

<br>

<div class="demo-focusable" tabindex="0" cdkMonitorElementFocus>
  <p>div with element focus monitored</p>
  <button>1</button><button>2</button>
</div>

<div class="demo-focusable" tabindex="0" cdkMonitorSubtreeFocus>
  <p>div with subtree focus monitored</p>
  <button>1</button><button>2</button>
</div>