https://github.com/stefonalfaro/Angular-JSON-Tree-Editor-Component
Angular JSON Tree Editor Component that actually works
https://github.com/stefonalfaro/Angular-JSON-Tree-Editor-Component
Last synced: 25 days ago
JSON representation
Angular JSON Tree Editor Component that actually works
- Host: GitHub
- URL: https://github.com/stefonalfaro/Angular-JSON-Tree-Editor-Component
- Owner: stefonalfaro
- Created: 2025-09-07T01:19:33.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-09-07T01:27:40.000Z (about 2 months ago)
- Last Synced: 2025-09-07T03:27:17.761Z (about 2 months ago)
- Language: TypeScript
- Size: 9.77 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - Angular-JSON-Tree-Editor-Component - Angular JSON Tree Editor Component that actually works. (Third Party Components / Editor Components)
- fucking-awesome-angular - Angular-JSON-Tree-Editor-Component - Angular JSON Tree Editor Component that actually works. (Third Party Components / Editor Components)
README
# Angular-JSON-Tree-Editor-Component
This does not exist and the packages on NPM are have bugs, don't work, have no documentation, or only for React. Therefore I decided to make my own component that actually works.
## How to use
````
So in the parent component you can get changes via
```
jsonDataChange(data:any){
console.debug(`Data Changed ${data}`);
console.debug(`Data Changed:`, JSON.stringify(data, null, 2));
}
```
### Automatic Changes to Save
This is disabled by default but you can just set this to true, then anytime you make a change it will output. Normally you need to click the Save button.
``@Input() autoUpdate:boolean = false;``
### jsonParse Pipe
This may or not be needed depending on how your data is structured but even when I am editing JSON in a plain textbox before I had this component I still had to prepare my data since I am reading from a SQL Server column.
```
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'jsonParse'
})
export class JsonParsePipe implements PipeTransform {
transform(value: string): any {
try {
return JSON.parse(value);
}
catch (e) {
return value;
}
}
}
```