Component

Inplace

Swap a read-only display for its editor in place. Click the display to reveal the content template, close it with a closer element, or drive the active state yourself.

Click to edit

Photo title: Autumn morning — click to edit

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

import { HbButtonComponent, HbInplaceImports, HbInputDirective } from '@herbst/ui';

@Component({
  selector: 'hb-demo-inplace-basic',
  imports: [HbInplaceImports, HbInputDirective, HbButtonComponent],
  template: `
    <hb-inplace class="w-full max-w-sm">
      <ng-template hbInplaceDisplay>
        <span class="text-sm">
          Photo title:
          <span class="font-medium">{{ value() }}</span>
          <span class="text-muted-foreground"> — click to edit</span>
        </span>
      </ng-template>

      <ng-template hbInplaceContent>
        <div class="flex items-center gap-2">
          <input hb-input #box [value]="value()" placeholder="Autumn morning" />
          <button hb-button hbInplaceCloser (click)="value.set(box.value)">Save</button>
        </div>
      </ng-template>
    </hb-inplace>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoInplaceBasicComponent {
  protected readonly value = signal('Autumn morning');
}

Controlled & events

idle

City: Freiburg

Disabled & prevent-click

Locked field — clicking does nothing

Notes: oak leaves turning amber

API reference

hb-inplace

Property	Description	Type	Default
[(hbActive)]	Two-way active state: false shows the display, true shows the content.	boolean	false
[hbDisabled]	Disable activation entirely; the display stays read-only.	boolean	false
[hbPreventClick]	Keep the display static (not clickable) — activate it programmatically via the exported instance instead.	boolean	false
(hbActivate) / (hbDeactivate)	Emit when the editor opens and closes.	void	—
exportAs / methods	Reference as #ref="hbInplace" to call activate(), deactivate(), or toggle().	'hbInplace'	—

Slots

Property	Description	Type	Default
ng-template[hbInplaceDisplay]	The read-only view shown while inactive.	template	—
ng-template[hbInplaceContent]	The editor shown while active.	template	—
[hbInplaceCloser]	Any element inside the content that deactivates on click.	directive	—