Inline Editing Numbers with Angular 6

Are you looking for a component that can make input numbers great again👏

How it looks like

Let’s get started. For reach this behavior we will create 1 directive and component in Angular 2+. Working DEMO at stackblitz

edit-input.component.ts

Logic is pretty simple, we have input data for form an output event that emitted than user click enter or removes focus from the element.

edit-input.component.scss

edit-input.component.html

Here is two div that replace each other depending on a flag editMode . However, you probably notice the appAutoFocus directive, let's take a look at how it realized:

autofocus.directive.ts

Basically that it, now you can use this component everywhere in your code.

Example:

Component and DEMO available here:

https://stackblitz.com/edit/angular-inline-edit

I am writing about my entrepreneurial journey as a full-stack developer and co-founder at Sensivo.eu. https://skob.io/

I am writing about my entrepreneurial journey as a full-stack developer and co-founder at Sensivo.eu. https://skob.io/