{

Angular - Input Placeholder examples


The input place holder is an html5 to describe input control.

This blog talks about placeholder usage in Angular form input elements.

  • Basic Input placeholder example in Angular
  • Conditional Placeholder example
  • Pipe placeholder in Angular

All these examples work in all angular versions - 9,10,11 and the latest

You can check my previous available post:

Dynamic placeholder binding in Angular component

In Html, Placeholder text are added to input using placeholder attribute in HTML5.

<input id="city"  placeholder="placeholder">

The same way It works in Angular for fixed placeholder text, However, The syntax is different for dynamic binding, we have to use [placeholder] You have to use property binding [] for attributes. emailPlaceholderText is a variable of type string in the Angular component.

With property binding, placeholder is defined inside square brackets and the syntax is as follows

<input id="email" class="form-control" [placeholder]="emailPlaceholderText">

or Without property binding i.e. no square brackets for placeholder, the variable is used as an expression.

In the component, the variable is declared with text.

And the Angular component to set placeholder text:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-input-placeholder',
  templateUrl: './input-placeholder.component.html',
  styleUrls: ['./input-placeholder.component.scss']
})
export class PlaceholderComponent {
  emailPlaceholderText = 'Please enter email';
  
}

This way, the Placeholder is dynamically passed from component to HTML template.

Conditional text display in placeholder

Sometimes, we need to display different texts based on conditional values. These conditional values are computed dynamically and return true or false values.

Conditional operator syntax - ?: in typescript used to check Boolean value, if true, the first value is set, else the second value is set.

Without property binding ie no square brackets

<input id="email" class="form-control" placeholder="{{isExist? placeholderText:existPlaceHolderText}}">

or wit square bracket syntax

<input id="email" class="form-control" [placeholder]="isExist? placeholderText:existPlaceHolderText">

In the component, Please define the necessary variables as seen below.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-input-conditional',
  templateUrl: './input-conditional.component.html',
  styleUrls: ['./input-conditional.component.scss']
})
export class InputNumberComponent {
  placeholderText: string = "Please enter new value";
  isExist = false;
  existPlaceHolderText = "Please add new value"

}

Angular pipes in placeholder text manipulation

Pipes are reusable functionalities applied in Angular components. Angular provides inbuilt pipes. we can use placeholder text to form elements.

This example displays capitalize first letter the place holder of input form element We can use titlecase pipe in placeholder text

<input id="email" class="form-control" placeholder="{{ placeholderText|titlecase}}">

Below code change placeholder text to uppercase

<input id="email" class="form-control" placeholder="{{ placeholderText|uppercase}}">

Conclusion

Although placeholder is an html5 attribute, With Angular, We can use dynamic binding, conditional, and pipes with placeholders to display text to input form elements.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.