dev-resources.site
for different kinds of informations.
Editing/Viewing the data of the File in angular
Viewing the file in the angular.
When we are listing the files in the angular using some transfer protocols like the sftp and ftp, sometimes there is even possibility that we want to see the data of that file. it’s a bit challenging work, but there is a library which would help us in this so that we can see the content of that file and along with that we can even edit it.
The library I'm talking about is ngx-editor.
to install the ngx-editor and add it in to your project, https://www.npmjs.com/package/ngx-editor this link can be visited.
to add the ngx-editor post installing into the project add the below line in the app. module.ts
import { NgxEditorModule } from 'ngx-editor';
post this we need to fetch the data of the file which we want to read it and then decode it.
The ts file data
_export class texteditor test implements OnInit {
editor!: Editor; //a variable for the editor
html: string="<html>"; a string which contains the data, it is used to read and write the data
fileName:string="";
constructor()
{
this.fileName=test”;
}
ngOnInit(): void {
var enc = new TextDecoder("utf-8"); //using a particular decoder
var arr = new Uint8Array([“filedata”]||[]);
this.html=enc.decode(arr); // adding data to the html so it can be displayed
this.editor = new Editor(); // creating the instance of the editor
}
// make sure to destory the editor
ngOnDestroy(): void {
this.editor.destroy();
}
}_
The html file contains this data
<div id="main">
<ngx-editor-menu [editor]="editor" *ngIf="true"> </ngx-editor-menu> // its used to display the menu of the editor which kind of has bold, italic, heading, images, link, adding colours to background and letters
<ngx-editor [editor]="editor" [(ngModel)]="html" [disabled]="false" ></ngx-editor> // editor means which editor to be used, the ngModel is the data to be displayed or to be edited, if disabled is true then the data would not be editable and if its false then the data can be altered
</div>
The box looks like how its shown below
This is one of the way by which we can view the data which is present in the file, after editing the data the altered data is present in the ngModel variable.
Featured ones: