Open In App

Angular 10 I18nSelectPipe API

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to see what is I18nSelectPipe in Angular 10 and how to use it.

I18nSelectPipe is a selector that is used to displays the string that matches the current value.

Syntax:

{{ value | i18nSelect : map}}

NgModule: Module used by I18nSelectPipe is:

  • CommonModule

 

Approach: 

  • Create the angular app to be used.
  • There is no need for any import for the I18nSelectPipe to be used.
  • In app.component.ts define the variables that takes the I18nSelectPipe value.
  • In app.component.html use the above syntax with ‘|’ symbol to make I18nSelectPipe element.
  • Serve the angular app using ng serve to see the output.

Input value:

  • value: it takes a string value.

Parameters:

  • mapping: it takes an object value that indicates the text that should be displayed for different values.

Example 1:

app.component.ts




import { Component, OnInit } 
from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    // Age Variable
    age : string = 'twenty';
  
    // Map from which I18nSelectPipe takes the value
    votin : any =
    {'twenty': 'Can Vote', 'seventeen':'Cannot Vote'};}


app.component.html




<!-- In Below Code I18nSelectPipe is used -->
<div>The User <b>{{age | i18nSelect: votin}}</b> </div>


Output:

Example 2:

app.component.ts




import { Component, OnInit }
from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    // Age Variable
    age : string = 'seventeen';
  
    // Map from which I18nSelectPipe takes the value
    votin : any = 
    {'twenty': 'Can Vote', 'seventeen':'Cannot Vote'};}


app.component.html




<!-- In Below Code I18nSelectPipe is used -->
<div>The User <b>{{age | i18nSelect: votin}}</b> </div>


Output:

Reference: https://angular.io/api/common/I18nSelectPipe



Last Updated : 02 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads