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:
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 : string = 'twenty' ;
votin : any =
{ 'twenty' : 'Can Vote' , 'seventeen' : 'Cannot Vote' };}
|
app.component.html
< 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 : string = 'seventeen' ;
votin : any =
{ 'twenty' : 'Can Vote' , 'seventeen' : 'Cannot Vote' };}
|
app.component.html
< div >The User < b >{{age | i18nSelect: votin}}</ b > </ div >
|
Output:
Reference: https://angular.io/api/common/I18nSelectPipe
Share your thoughts in the comments
Please Login to comment...