Angular - Input Placeholder code examples

Angular - Input Placeholder code examples

The input placeholder 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 is 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, the 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.

<input id="email" class="form-control" placeholder="{{emailPlaceholderText}}" />

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 the component to the 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 the first letter of the placeholder of the input form element We can use the titlecase pipe in placeholder text

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

Below code below 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.