Переключатель

PrimeNG/InputSwitch (opens in a new tab)

Переключатель ввода используется для выбора логического значения.

С чего начать

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

import { InputSwitchModule } from 'primeng/inputswitch';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-inputswitch',
  templateUrl: './prime-inputswitch.component.html',
  styleUrls: ['./prime-inputswitch.component.scss']
})
export class PrimeInputswitchComponent implements OnInit {
 
  constructor() { }
 
  checked1: boolean = false;
 
  checked2: boolean = true;
 
  ngOnInit(): void {
  }
}

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

<p-inputSwitch [(ngModel)]="checked1"></p-inputSwitch>

Basic

<p-inputSwitch [(ngModel)]="checked1"></p-inputSwitch>

Preselection

<p-inputSwitch [(ngModel)]="checked2"></p-inputSwitch>

Свойства

Name	Type	Default	Description
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
tabindex	number	null	Index of the element in tabbing order.
inputId	string	null	Identifier of the input element.
name	string	null	Name of the input element.
ariaLabelledBy	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
disabled	boolean	false	When present, it specifies that the element should be disabled.
readonly	boolean	false	When present, it specifies that the component cannot be edited.
trueValue	any	null	Value in checked state.
falseValue	any	null	Value in unchecked state.

События

Name	Parameters	Description
onChange	event.originalEvent: browser event<br>event.checked: checked state as a boolean	Callback to invoke on state change.

Стилизация

Name	Element
p-inputswitch	Container element.
p-inputswitch-checked	Container element in active state.
p-inputswitch-slider	Slider element behind the handle.

InputNumber Inputtext