Автофокус с угловой 7: Директива

Автор оригинала: Matthew Davis.

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

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

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.

 Autofocus?

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

Auto-Focus.directive.ts.

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

app.component.html.

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

Узнать больше в https://mathewdavis.io!

Читайте ещё по теме: