Угловой компонент ввода текста PrimeNG

Опубликовано: 22 Августа, 2022

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы узнаем, как использовать компонент InputText в angular PrimeNG. Давайте узнаем о свойствах, стиле и их синтаксисе, которые будут использоваться в коде.

Компонент InputTextArea: Это это элемент, который используется для создания текстового поля с поддержкой многострочного ввода.

Характеристики:

disabled: мы можем отключить компонент ввода. Это логический тип данных, и значение по умолчанию — false.

Стиль:

p-inputtext: это директива, применяемая к полю ввода текста.

<input type="text" pInputText />

Привязка модели: директива ngModel используется для привязки модели.

<input type="text" pInputText [(ngModel)]="property"/>

Размер: в дополнение к обычным размерам доступно более 2 размеров, добавьте p-inputtext-sm для ввода мелкого текста и добавьте p-inputtext-lg для ввода большого текста. Эти классы должны использоваться для изменения размера конкретного поля ввода.
Для меньшего ввода текста

<input type="text" pInputText class="p-inputtext-sm">

Для большего вводимого текста

<input type="text" pInputText class="p-inputtext-lg">

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.
```
 новое имя приложения
```
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
```
 компакт-диск имя приложения
```

Шаг 3: Установите PrimeNG в указанный вами каталог.

 npm установить пример --save
npm установить Primeicons --save

Структура проекта : это будет выглядеть следующим образом.

Пример 1. Это базовый пример, показывающий, как использовать компонент InputText.

app.component.html

<h2>GeeksforGeeks</h2>
<h5>PrimeNG InputText component</h5>
<div class="sizes">
  <input
    type="text"
    class="p-inputtext-lg"
    placeholder="Input text here"
    pInputText/>
</div>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
  
import { InputTextModule } from "primeng/inputtext";
  
@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, InputTextModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Выход:

Пример 2: В этом примере мы узнаем, как установить размер компонента InputText.

app.component.html

<h2>GeeksforGeeks</h2>
<h5>PrimeNG InputText component</h5>
<div class="sizes">
  <input
    type="text"
    class="p-inputtext-sm"
    placeholder="Input text here"
    pInputText/>
  <input type="text" placeholder="Input text here" pInputText />
  <input
    type="text"
    class="p-inputtext-lg"
    placeholder="Input text here"
    pInputText/>
</div>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
  
import { InputTextModule } from "primeng/inputtext";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            InputTextModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Выход:

Ссылка: https://primefaces.org/primeng/showcase/#/inputtext

AngularJS

Угловой компонент ввода текста PrimeNG

app.component.html

app.module.ts

app.component.html

app.module.ts

РЕКОМЕНДУЕМЫЕ СТАТЬИ