Inline Editing Numbers with Angular 6

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

Image for post
Image for post
How it looks like
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';@Component({selector: 'app-edit-input',templateUrl: './edit-input.component.html',styleUrls: ['./edit-input.component.scss'],})export class EditInputComponent implements OnInit {@Input() data: number;@Output() focusOut: EventEmitter<number> = new EventEmitter<number>();currency = '$';editMode = false;constructor() {}ngOnInit() {}onFocusOut() {this.focusOut.emit(this.data);}}
$lightGray: #c8c8c8;.cell {border: 2px solid transparent;padding: 11px 20px;width: 100%;height: 100%;&:hover {cursor: pointer;border: 2px dashed $lightGray;}}.cellInput {border: 2px solid transparent;padding: 11px 20px;width: 100%;height: 100%;}
<div *ngIf='!editMode' (click)='editMode=true' class='cell'>{{currency}} {{ data | number:'':'en' }}</div><input *ngIf='editMode' (focusout)="onFocusOut()" (keydown.enter)='$event.target.blur()' [(ngModel)]='data' class='cellInput'appAutofocus type='number' (keydown.enter)='$event.target.blur()' (focusout)="editMode=false">
import { Directive, ElementRef, OnInit } from '@angular/core';@Directive({selector: '[appAutofocus]',})export class AutofocusDirective implements OnInit {constructor(private elementRef: ElementRef) {}ngOnInit(): void {this.elementRef.nativeElement.focus();}}
<app-edit-input [data]='cost' (focusOut)='saveCost($event)'></app-edit-input>

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store