Package Exports

angular-autofocus-fix

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-autofocus-fix) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

angular-autofocus-fix

Angular 2/4 directive for fix autofocus on dynamically created controls (*ngIf, *ngFor, etc.). new version for Angular 5+

Uses HTML native attribute autofocus as the selector!
There are no custom selectors, no need to change your HTML template.

Works with native DOM. Doesn't use any dependencies(jQuery, etc.).

Installation

To install this library, run:

$ npm install angular-autofocus-fix --save

Quick start

Import the library in your Angular application, for example in AppModule:

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

import { AppComponent } from './app.component';

import { AutofocusModule } from 'angular-autofocus-fix'; // <--- new code

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,

    AutofocusModule, // <--- new code
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

You can now use autofocus directive in app.component.html

<input autofocus
       placeholder="I have autofocus"
       *ngIf="showInput"
>
<button (click)="showInput = !showInput">Toggle Input</button>

Advanced examples

Ways to disable autofocus: any js-falsely value, except the empty string

   <!-- with data binding -->
   <input [autofocus]=""> <!-- undefined value -->
   <input [autofocus]="undefined">
   <input [autofocus]="false">
   <input [autofocus]="null">
   <input [autofocus]="0">
   
   <!-- without data binding -->
   <input autofocus="undefined">
   <input autofocus="false">
   <input autofocus="null">
   <input autofocus="0">
   
   <input> <!-- disabled by default -->

Ways to enable autofocus: any js-true value and empty string

   <!-- empty string will enable autofocus, this is default html behavior -->
   <input [autofocus]="''">
   <input autofocus="">
   <input autofocus>
   
   <input autofocus="autofocus">
   
   <input [autofocus]="true">
   <input autofocus="true">
   
   <input [autofocus]="'any other values'">
   <input autofocus="any other values">

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint