CustomTagInputComponent

reference

1 min readUpdated 2026-08-11

Kind: Class

Source: Frontend/src/app/components/shared/dropdown/custom-tag-input/custom-tag-input.component.ts (line 10)

Part of: Frontend

CustomTagInputComponent manages tag selection through a dropdown interface, including selecting, unselecting, and checking available selections. It also handles Enter-key actions, contact creation, popup opening, and dropdown visibility within the shared dropdown UI.

Implements: OnInit

Methods

Method	Signature	Returns
`closeDropdown`	`closeDropdown(e: undefined)`	`void`
`toggoleDropdown`	`toggoleDropdown()`	`void`
`enterPressed`	`enterPressed(value: undefined)`	`void`
`selecting`	`selecting(dataRow: undefined)`	`void`
`unSelecting`	`unSelecting(dataRow: undefined)`	`void`
`ngOnInit`	`ngOnInit()`	`void`
`isAvailableSelection`	`isAvailableSelection()`	`void`
`IsSelected`	`IsSelected(dataRow: undefined)`	`void`
`createNewContact`	`createNewContact(dataRow: SelectedTags)`	`void`
`openPopup`	`openPopup(n: string, t: string, i: string)`	`void`
`OnOpenedPopup`	`OnOpenedPopup()`	`void`
`closePOpUp`	`closePOpUp()`	`void`
`saveFromPopup`	`saveFromPopup()`	`void`
`finalizeContactSaving`	`finalizeContactSaving(e: ContactPersons)`	`void`

Properties

Property	Type
`dataSource`	`any[]`
`_value`	`string`
`accountId`	`number`
`readOnly`	`boolean`
`selected`	`SelectedTags[]`
`customTagInput`	`ElementRef`
`tagInputHolder`	`ElementRef`
`sharedPopup`	`SharedPopupComponent`
`contactComponent`	`ContactViewEditComponent`
`tagInput`	`ElementRef`
`customTagInputDropdown`	`boolean`
`ItemAdded`	`any`
`ItemRemoved`	`any`
`validatedEmail`	`any`
`popup`	`any`
`tempEmail`	`SelectedTags`
`tempContactPerson`	`ContactPersons`

Where it refuses work

CustomTagInputComponent stops the work with an early return when n == this.dataSource.length.
CustomTagInputComponent stops the work with an early return when this.selected[i].display == dataRow.display.

Diagram

mermaid
graph LR
  User[User interaction] --> Component[CustomTagInputComponent]
  Component --> Toggle[toggoleDropdown]
  Component --> Close[closeDropdown]
  Component --> Select[selecting]
  Component --> Unselect[unSelecting]
  Component --> Check[isAvailableSelection]
  Component --> Selected[IsSelected]
  Component --> Enter[enterPressed]
  Enter --> Create[createNewContact]
  Component --> Popup[openPopup]

Usage

ts
import { CustomTagInputComponent } from './custom-tag-input.component';

function handleTagInput(component: CustomTagInputComponent): void {
  component.toggoleDropdown();

  if (component.isAvailableSelection()) {
    component.selecting();
  }

  component.enterPressed();
  component.closeDropdown();
}

AI Coding Instructions

Preserve the existing toggoleDropdown() method name when calling or modifying it, even though its spelling differs from toggle.
Keep selection changes inside selecting() and unSelecting() so dropdown and tag state remain coordinated.
Check isAvailableSelection() and IsSelected() before adding or removing selections.
Route Enter-key behavior through enterPressed() rather than duplicating contact-creation logic in event handlers.
Use openPopup() for contact-related popup interactions and keep createNewContact() focused on creating the contact.

Used by

1 reference from 1 file. Each is a place in this repository where the symbol is actually used — go read one rather than trusting an example.

Imported by (1)

TranslateHandler — Frontend/src/app/components/shared/shared.module.ts:1

Was this page helpful?

Download as PDF

ADocs generated by Atloria — from the code, always in sync →