Cómo implementar un editor JSON en Angular 17
Vamos a implementar un editor de ficheros JSON en un proyecto Angular 17 vacío, para ello creamos el proyecto angular:
ng new json-editor --no-standaloneEn este caso utilizaremos la librería ngx-ace-wrapper, se trata de un wrapper de la librería AceEditor.
Instalación de dependencias
npm i ngx-ace-wrapper
Importamos el módulo "AceModule":
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {AceModule} from "ngx-ace-wrapper";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AceModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Podemos sobrescribir la configuración de manera global, en este caso fijaremos un tamaño de fuente de 12pt
const DEFAULT_ACE_CONFIG: AceConfigInterface = {
fontSize: '12pt'
};Y declaramos la nueva configuración en nuestro módulo:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AceModule
],
providers: [
{
provide: ACE_CONFIG,
useValue: DEFAULT_ACE_CONFIG
}
],
bootstrap: [AppComponent]
})Importamos los estilos necesarios para el tema y la sintaxis de código que vamos a utilizar en nuestro componente:
import 'brace';
import 'brace/mode/json';
import 'brace/theme/monokai';En este caso hemos añadido el tema "monokai", disponemos de todos estos temas:
ambiance
chaos
chrome
clouds
clouds_midnight
cobalt
crimson_editor
dawn
dracula
dreamweaver
eclipse
github
gob
gruvbox
idle_fingers
iplastic
katzenmilch
kr_theme
kuroir
merbivore
merbivore_soft
mono_industrial
monokai
pastel_on_dark
solarized_dark
solarized_light
sqlserver
terminal
textmate
tomorrow
tomorrow_night
tomorrow_night_blue
tomorrow_night_bright
tomorrow_night_eighties
twilight
vibrant_ink
xcodeCreamos un pequeño contenido JSON para el ejemplo:
import { Component } from '@angular/core';
import 'brace';
import 'brace/mode/json';
import 'brace/theme/monokai';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
public value: string = JSON.stringify(
{
message: "Probando nuestro archivo JSON!!"
}, null, 2
);
}Y por último declaramos el componente ace en la vista:
<ace style="height: 200px; width: 600px;" [mode]="'json'" [theme]="'monokai'" [(value)]="value"></ace>En este caso hemos fijado unas dimensiones en nuestro componente utilizando la etiqueta style, es importante configurar un tamaño para la correcta visualización del editor.
Jorge García
Fullstack developer