PrimeNG Chips: Add tag when semicolon is typed

Triggering the Enter key events appears to be tricky. However, since you set the addOnBlur option on the PrimeNG Chips component:

<p-chips [addOnTab]="true" [addOnBlur]="true" (keydown)="onKeyDown($event)" ></p-chips>

you can accept the tag by calling blur() and focus() successively on the input element when the semicolon is typed:

onKeyDown(event: KeyboardEvent) {
  if (event.key === ";") {
    event.preventDefault();
    const element = event.target as HTMLElement;
    element.blur();
    element.focus();
  }
}

See this stackblitz for a demo.

You can use @ViewChild and control the primeng component:

my-comp.component.ts

import { Chips } from 'primeng/chips';
import { Component, OnInit, ViewChild } from '@angular/core';
    
export class MyComp implement OnInit {
    @ViewChild(Chips) chips: Chips;

    constructor(){}

    ngOnInit(){}
    
    onKeyDown(event) {
        if (event.key === ";") {
        // use the internal method to set the new value
            this.chips.writeValue([...this.chips.value, event.target.value]) // don't push the new value inside the array, create a new reference
            this.chips.cd.detectChanges(); // use internal change detection
            event.preventDefault();    //prevent ';' to be written
            event.target.value = "";   // reset the input value
        }
    }
}

my-comp.component.html

<p-chips (keydown)="onKeyDown($event)"></p-chips>

and then you can get all the values using [(ngmodel)] or formcontrolname (in a form).