ng-bootstra v4: Focus Input element inside modal after opeing it

Question

I create a modal component with NgbModal which contains some input elements. When the Modal opens the first input element should be opened, however I didn't find a way, to focus the Input element after the modal opens.

I can get get the input element (focus-on-newly-added-input-element), but when I call this after the calling `this.modalService.open(...), it doesn't focus anything, because the element doesn't exist in the DOM yet.

So I would have to call it once the modal is rendered.

This is what I have so far:

open(content) {
    this.modalService.open(content, { size: 'lg' });
    // TODO
}

PS: I found this answer for angularjs and boostrap 3: Call function after modal loads angularjs ui bootstrap

You should use a component as the content of your modal (as an example shows in ng-bootstrap documentation), and use the technique explained in the answer you linked to, in order to focus the input when the component, displayed in the modal, is displayed — JB Nizet, Sep 21 '17 at 10:24

score 0 · Answer 1 · answered Feb 02 '21 at 16:05

Use a template for the modal-body, and use the ngbAutoFocus directive on the element you want to be focused

add-user-modal.component.html

<ng-template #content let-modal>
  <common-modal title="Invite your Teammates" [buttons]="buttons" [modal]="modal">
      <label for="emails">Enter your team members' email addresses to grant them access to your team's account. Enter one email address per line.</label>
      <textarea ngbAutoFocus id="emails" class="form-control" placeholder="Emails" [formControl]="emailsFormControl"></textarea>
  </common-modal>
</ng-template>

modal.componenent.html

<div class="modal-header">
  <div class="title-container">
    <h4 class="modal-title" id="modal-basic-title">{{ title }}</h4>
  </div>
  <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <ng-content></ng-content>
</div>
<div class="modal-footer">
  <ng-container *ngFor="let button of buttons">
    <button type="button" [class]="button.style" [disabled]="button.disabled"
      (click)="modal.close(button.resultIfClicked)">{{ button.text }}</button>
  </ng-container>
</div>

Ian A · Accepted Answer · 2017-10-01T17:17:09.757

This Plunker demonstrates focusing on an input field when opening a modal.

If you set your modal up as per the "component as content" example (rather than "modal with default options" (https://ng-bootstrap.github.io/#/components/modal/examples) you can inject Renderer2 (if using Angular 4) in the constructor of NgbdModalComponent and in the open() method, use the following code to focus:

let inputElement = this.renderer.selectRootElement('#focusMe');
inputElement.focus();

The corresponding HTML for the modal is:

<div class="modal-header">
  <h4 class="modal-title">Hi there!</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>Hello, {{name}}!</p>
  <input type="text" id="focusMe" />
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

ng-bootstra v4: Focus Input element inside modal after opeing it

2 Answers2