Angular

Reading XML File In Angular 8

Here, we will learn about reading XML file in Angular 8. Reading XML file is very important in certain circumstances when the server returns the data in XML format.

We will use the static XML file stored in the local system in the assets folder of our project.

XML File:

<?xml version="1.0"?>  
<Employee>  
    <emp>  
        <id>1</id>  
        <name>Faisal</name>  
        <gender>Male</gender>  
        <mobile>514545</mobile> 
    </emp>  
    <emp>  
        <id>2</id>  
        <name>Bhavdip</name>  
        <gender>Male</gender>  
        <mobile>5431643</mobile>
    </emp>  
    <emp>  
        <id>3</id>  
        <name>Irshad</name>  
        <gender>Male</gender>  
        <mobile>43265436</mobile> 
    </emp>  
    <emp>  
        <id>4</id>  
        <name>Keyur</name>  
        <gender>Male</gender>  
        <mobile>5435431</mobile>
    </emp>  
    <emp>  
        <id>5</id>  
        <name>Tabish</name>  
        <gender>Male</gender>  
        <mobile>432656</mobile>  
    </emp>  
</Employee>

Create a new project in Angular 8 by typing the following commands

ng new read-xml-angular8 --routing

After creating the project, open the project in your favorite editor and install the timers npm package

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 reference for Bootstrap and jQuery

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ReadXmlAngular8</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <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>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Open the app.component.ts file and add the code in it.

import { Component } from '@angular/core';
import xml2js from 'xml2js';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'read-xml-angular8';
  public xmlItems: any;
  constructor(private _http: HttpClient) { this.loadXML(); }

  loadXML() {
    this._http.get('/assets/users.xml',
      {
        headers: new HttpHeaders()
          .set('Content-Type', 'text/xml')
          .append('Access-Control-Allow-Methods', 'GET')
          .append('Access-Control-Allow-Origin', '*')
          .append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method"),
        responseType: 'text'
      })
      .subscribe((data) => {
        this.parseXML(data)
          .then((data) => {
            this.xmlItems = data;
          });
      });
  }

  parseXML(data) {
    return new Promise(resolve => {
      var k: string | number,
        arr = [],
        parser = new xml2js.Parser(
          {
            trim: true,
            explicitArray: true
          });
      parser.parseString(data, function (err, result) {
        var obj = result.Employee;
        for (k in obj.emp) {
          var item = obj.emp[k];
          arr.push({
            id: item.id[0],
            name: item.name[0],
            gender: item.gender[0],
            mobile: item.mobile[0]
          });
        }
        resolve(arr);
      });
    });
  }
}

Code for app.component.html file

<div class="container">
  <table class="table table-bordered table-hover">
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Gender</th>
      <th>Mobile</th>
    </tr>
    <tr *ngFor="let item of xmlItems">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.gender}}</td>
      <td>{{item.mobile}}</td>
    </tr>
  </table>
</div>

Finally, add the HttpClientModule reference in the app.module.ts file and that’s it.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Faisal Pathan

Faisal Pathan is a founder of TheCodeHubs, .NET Project Manager/Team Leader, and C# Corner MVP. He has extensive experience with designing and developing enterprise-scale applications. He has good skills in ASP.NET C#, ASP.NET Core, ASP.NET MVC, AngularJS, Angular, React, NodeJS, Amazon S3, Web API, EPPlus, Amazon MWS, eBay Integration, SQL, Entity Framework, JavaScript, eCommerce Integration like Walmart, Tanga, Newegg, Group-on Store, etc. and Windows services.

Next Dynamic Am-Charts In Angular 8 »

Previous « Read XML File In ASP.NET MVC

View Comments

nodeX says:

January 16, 2020 at 8:53 pm

How can I do If I my HttpClient don't find the XML file in my project
Faisal Pathan says:

November 26, 2019 at 11:01 am

I'm not sure but I think yes
itchamp says:

November 23, 2019 at 4:07 am

I think this 'timers' library requires 'stream' package which does not exist in web. This package should be used in node apps. I that correct?