npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-input-focus

v1.0.13

Published

An Angular focus attribute directive.

Downloads

244

Readme

Angular Input Focus Attribute Directive

This package is for handling focus on html elements in Angular apps. It is tightly coupled with the DOM but safe to use in server-side rendering settings since we are checking to make sure the directive is running in a browser before using any DOM-specific functions.

NPM Build Status Test Status Code Coverage Issues License

Installation

Install using NPM:

npm install angular-input-focus --save

Next, import the module in your application module:

import { AngularInputFocusModule } from 'angular-input-focus';

@NgModule({
  imports: [AngularInputFocusModule]
})

Now you're ready to use the directive in your project.

Usage

Here are some standard use cases.

Autofocus

For autofocus-like functionality, you can set libFocus to true (or a condition):

<!-- Focus First name when control is rendered -->
First name: <input type="text" name="fname" [libFocus]="true">
Last name: <input type="text" name="lname">

Focus using an EventEmitter

You can also pass an EventEmitter<boolean> to the setFocus input. Imagine a component called MyComponent:

export class MyComponent {
    // We will pass this to the directive in our view
    focusEvent = new EventEmitter<boolean>();
    // When called, will set the focus on our input
    setFocus() {
        this.focusEvent.emit(true);
    }
}

In the template for MyComponent:

<input [libFocus]="false" [setFocus]="focusEvent">`

Whenever your focusEvent emits a value, your element will focus/blur depending on whether the emitted value is true or false. You can find a working example of this in the tester app for the project.

Focus last element with dynamic elements

You don't need to use EventEmitter for this. Simply set libFocus to a conditional boolean value:

rows = ['First', 'Second'];

addRow() {
  this.rows.push('');
}

shouldFocusRow(index: number): boolean {
  return index + 1 === this.rows.length;
}

trackByIndex(index, row) {
  return index;
}

And in your template:

<button (click)="addRow()">Add row</button>

<!-- Important to use trackBy to prevent stuttering on input. -->
<div *ngFor="let row of this.rows; let i = index; trackBy: trackByIndex">
  <input id="row{{ i }}" [libFocus]="shouldFocusRow(i)" [(ngModel)]="rows[i]" />
</div>

It's important in general to use trackBy for dynamic inputs to avoid UI stutter as you're typing. Here's a working StackBlitz example you can run and modify.

Note on skipChangeDetection

If you're using Angular Material, Change Detection needs to run after setting focus because Angular Material tracks focus; otherwise you will get the dreaded ExpressionChangedAfterItHasBeenCheckedError exception. If you are using native HTML inputs, you can skip change detection by setting [skipChangeDetection]="true".

Development

The main app (angular-input-focus-tester) is for testing the angular-input-focus library in the projects folder. Run ng serve to build and serve the test app.

To publish a new version of the library to NPM, run npm run publish-lib. This will do the following:

  • Run npm version patch to create a new patch.
  • Build the library.
  • Copy readme/license from the main project to the library.
  • Publish the patch on NPM.