Angular: inline editing with text box seems like readonly

Updated on July 23, 2020     Kisan Patel

Let’s create an input that blends seamlessly to its environment with a tiny #Angular component and some clever CSS. Great for popular “inline edit” pattern these days!

seamless-input.component.ts

import { Component, ContentChild, HostBinding, ViewEncapsulation } from "@angular/core";
import { NgControl } from "@angular/forms";

@Component({
  selector: "seamless-input",
  template: "<ng-content select='input'></ng-content>",
  styleUrls: ["./seamless-input.style.scss"],
  encapsulation: ViewEncapsulation.None
})
export class SeamlessInputComponent {
  @ContentChild(NgControl)
  private readonly control?: NgControl;

  @HostBinding("attr.data-value")
  get value(): string {
    return String(this.control && this.control.value);
  }
}

seamless-input.style.scss

seamless-input {
  position: relative;
  display: inline-block;

  &:before {
    content: attr(data-value);
    visibility: hidden;
    white-space: pre;
    padding-right: 1px;
  }

  input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-width: 0;
    outline: none;
    background-color: transparent;
    padding: inherit;
    font: inherit;
    color: inherit;
    text-align: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-indent: inherit;
    text-transform: inherit;
  }
}

<h1>
  How many inputs do you see? 😉
</h1>
This is static text
  <seamless-input>
    <input [(ngModel)]="first">
  </seamless-input>

<h2>
  Try to find
  <seamless-input>
    <input [(ngModel)]="second">
  </seamless-input>
   here
</h2>

Demo: https://stackblitz.com/edit/angular-seamless-input

Second method: https://www.bennadel.com/blog/3865-looking-at-different-click-to-edit-implementations-in-angular-9-1-12.htm