DEV Community

loading...
Cover image for Angular InputText

Angular InputText

PrimeTek
PrimeTek is a world renowned vendor of popular UI Component suites including PrimeFaces, PrimeNG, PrimeReact and PrimeVue. For any inquires please use contact@primetek.com.tr to contact us.
・3 min read

Angular InputText renders a text field to enter data.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {InputTextModule} from 'primeng/inputtext';
Enter fullscreen mode Exit fullscreen mode

Getting Started

InputText is applied to an input field with pInputText directive.

<input type="text" pInputText />
Enter fullscreen mode Exit fullscreen mode

Model Binding

A model can be bound using standard ngModel directive.

<input type="text" pInputText [(ngModel)]="property"/>
Enter fullscreen mode Exit fullscreen mode

Float Label

A floating label is implemented by wrapping the input and the label inside a container with .p-float-label class.

<span class="p-float-label">
    <input id="float-input" type="text" pInputText> 
    <label for="float-input">Username</label>
</span>
Enter fullscreen mode Exit fullscreen mode

Icons

An icon can be integrated within an input field by wrapping the input and the icon with an element having either p-input-icon-right or p-input-icon-left class depending on the icon location.

<span class="p-input-icon-left">
    <i class="pi pi-search"></i>
    <input type="text" pInputText [(ngModel)]="value1" placeholder="Search">         
</span>

<span class="p-input-icon-right">
    <i class="pi pi-spin pi-spinner"></i>
    <input type="text" pInputText [(ngModel)]="value2" >        
</span> 
Enter fullscreen mode Exit fullscreen mode

Sizes

2 more sizes are available in addition to a regular input, for a smaller input add p-inputtext-sm and for a larger one, use p-inputtext-lg. Note that these classes should be used to change the size of a particular field, for global scaling see theming page.

<input type="text" pInputText class="p-inputtext-sm" placeholder="Small">         
<input type="text" pInputText class="p-inputtext-sm" placeholder="Small">         
<input type="text" pInputText class="p-inputtext-lg"  placeholder="Large">   
Enter fullscreen mode Exit fullscreen mode

Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the class to a container element so that descendant inputs share the same style easier

<div class="p-inputtext-sm">
    <input type="text" pInputText>
    <p-inputnumber></p-inputnumber>
    <p-inputmask></p-inputmask>
</div>
Enter fullscreen mode Exit fullscreen mode

Outlined vs Filled

Input fields come in two styles, default is outlined with borders around the field whereas filled alternative adds a background color to the field. Applying p-input-filled to an ancestor of an input p-input-filled enables the filled style. If you prefer to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.

<div class="p-input-filled">
    <input type="text" pInputText>
</div>   
Enter fullscreen mode Exit fullscreen mode

Addons

Text, icon, buttons and other content can be grouped next to an input by wrapping the addons and input inside .p-inputgroup element. Multiple addons can be used within the same group as well.

<div class="p-inputgroup">
    <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
    <input type="text" pInputText placeholder="Username">         
</div>

<div class="p-inputgroup">
    <span class="p-inputgroup-addon"><i class="pi pi-tags"></i></span>  
    <span class="p-inputgroup-addon"><i class="pi pi-shopping-cart"></i></span>   
    <input type="text" pInputText placeholder="Price"> 
    <span class="p-inputgroup-addon">$</span>  
    <span class="p-inputgroup-addon">.00</span>      
</div>
Enter fullscreen mode Exit fullscreen mode

Theming

InputText supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG InputText showcase for demos and documentation.

Discussion (0)

Forem Open with the Forem app