En este artículo vamos a ver qué es JsonPipe en Angular 10 y cómo usarlo.
JsonPipe
Sintaxis:
{{ value | json}}
NgModule: el módulo utilizado por JsonPipe es:
- CommonModule
Acercarse:
- Cree la aplicación angular que se utilizará
- No hay necesidad de ninguna importación para que se use JsonPipe
- En app.component.ts, defina las variables que toman el valor de JsonPipe.
- En app.component.html use la sintaxis anterior con ‘|’ símbolo para hacer el elemento JsonPipe.
- sirva la aplicación angular usando ng serve para ver el resultado
Valor de entrada:
- valor: un valor de cualquier tipo para convertir en una string de formato JSON
Ejemplo 1:
app.component.ts
import { Component }
from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
// JSON object
emp: Object = {
"list":[
{
"name":"Billy Lee",
"position":"Web Developer",
"office":"Detroit",
"salary":"$50000",
"edit":"Edit",
"delete":"Delete"
},
{
"name":"John Doe",
"position":"Manager",
"office":"Troy",
"salary":"$90000",
"edit":"Edit",
"delete":"Delete"
},
{
"name":"James Baxter",
"position":"IT Support",
"office":"Detroit",
"salary":"$30000",
"edit":"Edit",
"delete":"Delete"
},
{
"name":"Jimmy Lee",
"position":"Web Developer",
"office":"Detroit",
"salary":"$50000",
"edit":"Edit",
"delete":"Delete"
},
{
"name":"Nick Wess",
"position":"Sales",
"office":"Ann Arbor",
"salary":"$40000",
"edit":"Edit",
"delete":"Delete"
},
{
"name":"Sarah Deets",
"position":"Graphic Designer",
"office":"Ann Arbor",
"salary":"$40000",
"edit":"Edit",
"delete":"Delete"
}
]
}
}
app.component.html
<div>
<pre>{{emp | json}}</pre>
</div>
Producción:
Referencia: https://angular.io/api/common/JsonPipe