Чипсы

Чипсы используются для ввода нескольких значений в поле ввода.

С чего начать

Подключите модуль

import { ChipsModule } from 'primeng/chips';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-chips',
  templateUrl: './prime-chips.component.html',
  styleUrls: ['./prime-chips.component.scss']
})
export class PrimeChipsComponent implements OnInit {
  valuesBasic: string[];
  valuesComma: string[];
  valuesTemplate: string[];
  valuesSizeLg: string[];
  valuesSizeMd: string[];
  valuesSizeSm: string[];
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
}

Встройте компонент с помощью тэга p-chips.

Basic

Comma Separator

Template

item - (active)

Размеры

Float

Свойства

Name	Type	Default	Description
field	string	null	Name of the property to display on a chip.
max	number	null	Maximum number of entries allowed.
disabled	boolean	false	When present, it specifies that the element should be disabled.
style	string	null	Inline style of the element.
styleClass	string	null	Style class of the element.
placeholder	string	null	Advisory information to display on input.
tabindex	number	null	Index of the element in tabbing order.
inputId	string	null	Identifier of the focus input to match a label defined for the component.
ariaLabelledBy	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
allowDuplicate	boolean	true	Whether to allow duplicate values or not.
inputStyle	string	null	Inline style of the input field.
inputStyleClass	string	null	Style class of the input field.
addOnTab	boolean	false	Whether to add an item on tab key press.
addOnBlur	boolean	false	Whether to add an item when the input loses focus.
separator	string	null	Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","

События

Name	Parameters	Description
onAdd	originalEvent: Browser event<br>value: Added item value	Callback to invoke when a value is added.
onRemove	originalEvent: Browser event<br>value: Added item value	Callback to invoke when a value is removed.
onChipClick	originalEvent: Browser event<br>value: Clicked item value	Callback to invoke when a chip is clicked.
onFocus	originalEvent: Browser event	Callback to invoke when a input is focused.
onBlur	originalEvent: Browser event	Callback to invoke when a input loses focus.

Шаблоны

Name	Parameters
chip	$implicit: value

Стилизация

Name	Element
p-chips	Container element.
p-chips-token	Chip element container.
p-chips-token-icon	Icon of a chip.
p-chips-token-label	Label of a chip.
p-chips-input-token	Container of input element.

Накладываение текста при предзаполненном p-chips

Такая ситуация в данный момент исправляется добавлением классаp-inputwrapper-filled, а лучше проверкой:

Также стоит изменить values

values = new BehaviorSubject(["Один", "Два", "Три"]);

Checkbox Confirmdialog