Angular - Input Placeholder examples


Input place holder is an html5 to describe about input control.

This blog talks about placeholder usage in Angular form input elements

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

All these examples works in all angular versions - 9,10,11 and 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 an variable of type string in 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, but variable is used as an expression.

In the component, 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, Placeholder is dynamically passed from component to html template.

Conditional text display in place holder

Sometimes, we need to have a display different texts based on conditional value. This conditional values are computed dynamically, returns true or false values.

Conditional operator syntax - ?: in typescript used to check Boolean value, if true, first value is set, else 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 defined 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 which we can use in 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.