Автофокус с Angular 7: Директива

Создание элементов ввода с возможностью «автофокусировки» может быть громоздким процессом. В этом упражнении мы будем использовать директиву Angular, которая позволит повторно использовать нашу функциональность в вашем приложении.

Во-первых, давайте создадим директиву

auto-focus.directive.ts

import { AfterContentInit, Directive, ElementRef, Input } from '@angular/core';

@Directive({
    selector: '[autoFocus]'
})
export class AutofocusDirective implements AfterContentInit {

    @Input() public appAutoFocus: boolean;

    public constructor(private el: ElementRef) {

    }

    public ngAfterContentInit() {

        setTimeout(() => {

            this.el.nativeElement.focus();

        }, 500);

    }

}

Далее нам нужно сообщить нашему AppModule что эта новая директива существует, и объявить ее доступной, обновив наш app.module.ts :

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {AutoFocusDirective} from './auto-focus.directive';

@NgModule({

    declarations: [
        AppComponent,
        AutoFocusDirective
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]

})
export class AppModule {
}

Теперь давайте использовать его в компоненте

app.component.html

<div> Autofocus? <input appAutoFocus> </div>

Смотрите также:

Смотрите больше на