En este artículo vamos a ver qué es I18nSelectPipe en Angular 10 y cómo usarlo.
I18nSeleccionarTubería
Sintaxis:
{{ value | i18nSelect : map}}
NgModule: el módulo utilizado por I18nSelectPipe es:
- CommonModule
Acercarse:
- Cree la aplicación angular que se utilizará.
- No es necesario realizar ninguna importación para utilizar I18nSelectPipe.
- En app.component.ts define las variables que toman el valor de I18nSelectPipe.
- En app.component.html use la sintaxis anterior con ‘|’ símbolo para hacer el elemento I18nSelectPipe.
- Sirva la aplicación angular usando ng serve para ver el resultado.
Valor de entrada:
- valor: toma un valor de string .
Parámetros:
- mapeo: toma un valor de objeto
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Referencia: https://angular.io/api/common/I18nSelectPipe