Компонент ориентации слайдера формы Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Эта статья покажет нам, как использовать компонент ориентации слайдера в Angular PrimeNG.
Компонент Slider — это элемент ввода, который принимает числовые входные данные.
Синтаксис:
<p-slider [(ngModel)]="..." orientation="..."> </p-slider>
Свойства ориентации слайдера формы Angular PrimeNG:
- ориентация: используется для установки ориентации ползунка, допустимыми значениями являются горизонтальное и вертикальное, это строковый тип данных, а значение по умолчанию — горизонтальное.
Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Это будет выглядеть следующим образом.
Чтобы запустить указанный выше файл, выполните следующую команду:
ng serve --save
Пример 1. В этом базовом примере показано, как использовать компонент ориентации ползунка формы Angular PrimeNG, используя горизонтальную ориентацию.
- приложение.component.html:
HTML
< h1 style = "color: green" >GeeksforGeeks</ h1 > < h5 >Angular PrimeNG Slider Orientation</ h5 > < input type = "text" pInputText [(ngModel)]="gfg"/> < br />< br /> < p-slider [(ngModel)]="gfg" orientation = "horizontal" > </ p-slider > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" }) export class AppComponent { gfg: number; } |
- app.module.ts:
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import {FormsModule} from "@angular/forms" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import {SliderModule} from "primeng/slider" ; import {InputTextModule} from "primeng/inputtext" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, SliderModule, InputTextModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
Выход:
Пример 2: Это еще один пример, который показывает, как использовать компонент ориентации ползунка формы Angular PrimeNG, используя вертикальную ориентацию.
- приложение.component.html:
HTML
< h1 style = "color: green" >GeeksforGeeks</ h1 > < h5 >Angular PrimeNG Form Slider Orientation Component</ h5 > < input type = "text" pInputText [(ngModel)]="gfg"/> < br />< br /> < p-slider [(ngModel)]="gfg" orientation = "vertical" > </ p-slider > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" }) export class AppComponent { gfg: number; } |
- app.module.ts:
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import {FormsModule} from "@angular/forms" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import {SliderModule} from "primeng/slider" ; import {InputTextModule} from "primeng/inputtext" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, SliderModule, InputTextModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
Выход:
Ссылка: https://primefaces.org/primeng/slider