How to set focus on the elements of the modal as soon as they are opened in Angular 2?
<p>I am a newbie to Angular JS and with the new version of Angular 2 in place, I am facing trouble implementing the directive which can handle the force focus on the modal which is opened on clicking a button. </p>

<p>There are several similar questions which were asked in the past and the answers are in Angular 1 as follows:</p>

<pre><code>app.directive('focusMe',
    ['$timeout',
        function ($timeout) {
            return {
                link: {
                    pre: function preLink(scope, element, attr) {
                      // ...
                    },
                    post: function postLink(scope, element, attr) {
                        $timeout(function () {
                            element[0].focus();
                        }, 0);

                    }
                }
            }
        }]);
});
</code></pre>

<p>I am trying to convert this same piece of code in Angular 2. But I am not sure how to achieve it. Could anyone point me in the right direction by giving me more information on how to achieve this.</p>

<p>Edit:</p>

<p>I tried to implement the directive as follows and when I debug the code, I even see that this directive is being called, but I am still unable to get the focus on the elements on the modal dialog:</p>

<pre><code>import { Directive, ElementRef } from "@angular/core";

@Directive({
    selector: "[ModFocus]"
})

export class ModalFocus {

    constructor(private _el: ElementRef) {

        this._el.nativeElement.focus();
    }

}
</code></pre>

<p>Am I doing something wrong here? Or do I have to do something else other than just calling focus() on the nativeElement?</p>

<p>HTML Modal:</p>

<pre><code>&lt;div class="modal-dialog modal-sm" tabindex="-1"&gt;
        &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
                &lt;h4 class="modal-title"&gt;Are you sure?&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
                Warning
            &lt;/div&gt;
        &lt;div class="modal-footer ok-cancel" ModFocus&gt;
                &lt;button type="button" class="btn btn-default" (click)="cancel()"&gt;Cancel&lt;/button&gt;
                &lt;button type="button" class="btn btn-primary" (click)="delete()" data-dismiss="modal"&gt;Delete&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>Thank you.</p>