Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Angular 10 I18nSelectPipe API

  • Last Updated : 02 Jun, 2021

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!