Чекбокс

Чекбокс - это расширение стандартного элемента флажка с тематизацией.

С чего начать

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

import { CheckboxModule } from 'primeng/checkbox';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-checkbox',
  templateUrl: './prime-checkbox.component.html',
  styleUrls: ['./prime-checkbox.component.scss']
})
export class PrimeCheckboxComponent implements OnInit {
 
  constructor() { }
 
  selectedCities: string[] = [];
  selectedCategories: any[] = ['Technology', 'Sports'];
  categories: any[] = [{ name: 'Accounting', key: 'A' }, { name: 'Marketing', key: 'M' }, { name: 'Production', key: 'P' }, { name: 'Research', key: 'R' }];
  checked: boolean = false;
 
  ngOnInit(): void {
    this.selectedCategories = this.categories.slice(1, 3);
  }
 
}

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

Basic

checked

Multiple

New YorkSan FranciscoLos AngelesChicago

Dynamic Values, Preselection, Value Binding and Disabled Option

category.name

Свойства

Name	Type	Default	Description
name	string	null	Name of the checkbox group.
value	any	null	Value of the checkbox.
label	string	null	Label of the checkbox.
disabled	boolean	false	When present, it specifies that the element should be disabled.
binary	boolean	false	Allows to select a boolean value instead of multiple values.
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.
ariaLabel	string	null	Used to define a string that labels the input element.
style	object	null	Inline style of the component.
styleClass	string	null	Style class of the component.
labelStyleClass	string	null	Style class of the label.
checkboxIcon	string	pi pi-check	Icon class of the checkbox icon.
readonly	boolean	false	When present, it specifies that the component cannot be edited.
required	boolean	false	When present, it specifies that checkbox must be checked before submitting the form.
trueValue	any	null	Value in checked state.
falseValue	any	null	Value in unchecked state.

События

Name	Parameters	Description
onChange	checked: Boolean value to represent new state of checkbox. originalEvent: Browser event	Callback to invoke on checkbox click.

Методы

Name	Parameters	Description
focus	-	Applies focus.

Стилизация

Name	Element
p-chkbox	Container element
p-chkbox-box	Container of icon.
p-chkbox-icon	Icon element.
p-chkbox-label	Label element.
p-label-active	Label element of a checked state.
p-label-focus	Label element of a focused state.
p-label-disabled	Label element of a disabled state.

Card Chips