Cómo mostrar un json por pantalla en Angular

Anuncio:

Hola! Hoy vamos a ver un sencillo método para mostrar la conversión a json de un objeto en Angular y mostrarlo por pantalla.

Cuando estamos desarrollando una aplicación en Angular, a veces necesitamos mostrar por pantalla la representación en json de un objeto u array de nuestro controlador, ya sea por la propia funcionalidad de la app, o para depurar los valores de las variables.

Para hacerlo, en nuestro controlador tenemos que importar el ‘CommonModule’:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';


@Component({
  selector: 'app-create-user',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './create-user.component.html',
  styleUrl: './create-user.component.css'
})

export class CreateUserComponent {

  user = {
    name: "Nombre de prueba",
    mail: "Mail de prueba",
    age: 33
  }

}

Como puedes apreciar, hay que incluir el módulo CommonModule tanto en el import del fichero como en la propiedad ‘imports’ del @Component.

Para usarlo en la vista, simplemente usamos el pipe.

{{ user | json }}

Y como resultado tendríamos algo así:

{ "name": "Nombre de prueba", "mail": "Mail de prueba", "age": 33 }

Una de las ventajas de usar este pipe, es que, puesto que estamos usando el property binding de angular, cualquier cambio en el objeto ‘user’ se verá reflejado en el json por pantalla.

Espero que os haya sido de utilidad.

¡HackSaludos!

• Angular