Introduction
In this article, we will learn how to Create a custom autofocus directive in Angular application.
Prerequisites
- Basic Knowledge of Angular 2 or higher
- Visual Studio Code
- Node and NPM installed
- Bootstrap (Optional)
Create an Angular Project
Create an Angular project by using the following command.
ng new angapp
Now install Bootstrap by using the following command,
npm install bootstrap --save
Now open the styles.css file and add Bootstrap file reference. To add a reference in the styles.css file add this line.
@import '~bootstrap/dist/css/bootstrap.min.css';
Create Directive
Create a new directive using the Angular CLI command
ng generate directive autofocus
Now open autofocus.directive.ts file and add following code
import { Directive, ElementRef, AfterViewInit } from '@angular/core';
@Directive({
selector: '[Autofocus]'
})
export class AutofocusDirective implements AfterViewInit {
constructor(private el: ElementRef) {}
ngAfterViewInit() {
this.el.nativeElement.focus();
}
}
Now open app.component.html file and add the following code.
<div class="container" style="margin-top:10px;margin-bottom: 24px;">
<div class="col-sm-12 btn btn-info">
Autofocus Directive in Angular Application
</div>
</div>
<div class="container">
<input type="text" class="form-control" placeholder="Auto Focused Textbox" Autofocus />
</div>
Now open app.module.ts and following code
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AutofocusDirective } from './autofocus.directive';
@NgModule({
declarations: [
AppComponent, AutofocusDirective
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule { }
Now run the application using npm start and check the result.
Summary
In this article, we learned how to create a custom autofocus directive in Angular application.