Post
Ask Question

Reading XML File In Angular 8

Introduction

 
Here, we will learn about reading XML file in Angular 8. Reading XML files is very important in certain circumstances, especially when the server returns the data in XML format.
 
We will use a static XML file stored in the local system in the assets folder of our project.
 
Prerequisites
  • Basic knowledge of Angular 7
  • Visual Studio Code installed on the system
  • Angular CLI installed on the system
  • NodeJS must be installed
XML File
  1. <?xml version="1.0" encoding="UTF-8"?>    
  2. <Employee>    
  3.    <emp>    
  4.       <id>1</id>    
  5.       <name>Faisal</name>    
  6.       <gender>Male</gender>    
  7.       <mobile>514545</mobile>    
  8.    </emp>    
  9.    <emp>    
  10.       <id>2</id>    
  11.       <name>Bhavdip</name>    
  12.       <gender>Male</gender>    
  13.       <mobile>5431643</mobile>    
  14.    </emp>    
  15.    <emp>    
  16.       <id>3</id>    
  17.       <name>Irshad</name>    
  18.       <gender>Male</gender>    
  19.       <mobile>43265436</mobile>    
  20.    </emp>    
  21.    <emp>    
  22.       <id>4</id>    
  23.       <name>Keyur</name>    
  24.       <gender>Male</gender>    
  25.       <mobile>5435431</mobile>    
  26.    </emp>    
  27.    <emp>    
  28.       <id>5</id>    
  29.       <name>Tabish</name>    
  30.       <gender>Male</gender>    
  31.       <mobile>432656</mobile>    
  32.    </emp>    
  33. </Employee>    
Create a new project in Angular 8 by typing the following command.
  1. ng new read-xml-angular8 --routing 
After creating the project, open the project in your favorite editor and install the "timers" npm package. 
  1. npm install timers 
This package is necessary for reading an XML file with xml2js package.
 
Open the index.html present at root folder and add a reference for Bootstrap and jQuery.
  1. <!doctype html>   
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>ReadXmlAngular8</title>  
  6.       <base href="/">  
  7.       <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.       <link rel="icon" type="image/x-icon" href="favicon.ico">  
  9.       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  
  10.       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>   
  11.    </head>  
  12.    <body>  
  13.       <app-root></app-root>  
  14.    </body>  
  15. </html> 
Open the app.component.ts file and add the following code in it. 
  1. import { Component } from '@angular/core';  
  2. import xml2js from 'xml2js';  
  3. import { HttpClient, HttpHeaders } from '@angular/common/http';  
  4. @Component({  
  5.   selector: 'app-root',  
  6.   templateUrl: './app.component.html',  
  7.   styleUrls: ['./app.component.css']  
  8. })  
  9. export class AppComponent {  
  10.   title = 'read-xml-angular8';  
  11.   public xmlItems: any;  
  12.   constructor(private _http: HttpClient) { this.loadXML(); }  
  13.   loadXML() {  
  14.     this._http.get('/assets/users.xml',  
  15.       {  
  16.         headers: new HttpHeaders()  
  17.           .set('Content-Type', 'text/xml')  
  18.           .append('Access-Control-Allow-Methods', 'GET')  
  19.           .append('Access-Control-Allow-Origin', '*')  
  20.           .append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method"),  
  21.         responseType: 'text'  
  22.       })  
  23.       .subscribe((data) => {  
  24.         this.parseXML(data)  
  25.           .then((data) => {  
  26.             this.xmlItems = data;  
  27.           });  
  28.       });  
  29.   }  
  30.   parseXML(data) {  
  31.     return new Promise(resolve => {  
  32.       var k: string | number,  
  33.         arr = [],  
  34.         parser = new xml2js.Parser(  
  35.           {  
  36.             trim: true,  
  37.             explicitArray: true  
  38.           });  
  39.       parser.parseString(data, function (err, result) {  
  40.         var obj = result.Employee;  
  41.         for (k in obj.emp) {  
  42.           var item = obj.emp[k];  
  43.           arr.push({  
  44.             id: item.id[0],  
  45.             name: item.name[0],  
  46.             gender: item.gender[0],  
  47.             mobile: item.mobile[0]  
  48.           });  
  49.         }  
  50.         resolve(arr);  
  51.       });  
  52.     });  
  53.   }  
  54. } 
Here is the code for app.component.html file.
  1. <div class="container">    
  2.   <table class="table table-bordered table-hover">    
  3.     <tr>    
  4.       <th>Id</th>    
  5.       <th>Name</th>    
  6.       <th>Gender</th>    
  7.       <th>Mobile</th>    
  8.     </tr>    
  9.     <tr *ngFor="let item of xmlItems">    
  10.       <td>{{item.id}}</td>    
  11.       <td>{{item.name}}</td>    
  12.       <td>{{item.gender}}</td>    
  13.       <td>{{item.mobile}}</td>    
  14.     </tr>    
  15.   </table>    
  16. </div>    
Finally, add the HttpClientModule reference in the app.module.ts file and that’s it.
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';  
  4. import { AppComponent } from './app.component';  
  5. import { HttpClientModule } from '@angular/common/http';  
  6. @NgModule({  
  7.   declarations: [  
  8.     AppComponent  
  9.   ],  
  10.   imports: [  
  11.     BrowserModule,  
  12.     AppRoutingModule,  
  13.     HttpClientModule  
  14.   ],  
  15.   providers: [],  
  16.   bootstrap: [AppComponent]  
  17. })  
  18. export class AppModule { }  

Output

 
Reading XML File In Angular 8
Please give your valuable feedback/comments/questions about this article. Please let me know if you liked and understood this article and how I could improve it.


Similar Articles