I parse jacoco.xml in angular compoment:

1- install the “timers” and "xml2js" npm package.

2 - in AppComponent class:

declare const require;
const xml2js = require("xml2js");
import { HttpClient, HttpHeaders } from '@angular/common/http';

export class AppComponent {

  public xmlItems: any;
  constructor(private _http: HttpClient) { this.loadXML(); }
  loadXML() {
    let arr = []
    this._http.get('/assets/jacoco.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,
        jacocoArray = [],
        parser = new xml2js.Parser(
          {
            trim: true,
            explicitArray: true
          });
      parser.parseString(data, function (err, result) {
        var obj = result.report;
        for (var i = 0; i < obj.counter.length; i++) {
          console.log(obj.counter[i].$.type)
        }

        for (k in obj.counter) {

          var item = obj.counter[k].$;
          
          var coveredNumber = Number(item.covered)
          var missedNumber = Number(item.missed)
          var sum = coveredNumber + missedNumber

          var percentage = (100 * coveredNumber) / sum

          jacocoArray.push({
            type: item.type,
            covered: item.covered,
            missed: item.missed,
            percentage: percentage.toFixed(2),

          });
        }
        resolve(jacocoArray);
      });
    });
  }

3 - In template html:

<div class="container">    

  <table class="table table-bordered table-hover">    
    <tr>    
      <th>Type</th>   
      <th>Covered</th>   
      <th>Missed</th>    
      <th>Percentage</th>    
    </tr>    
    <tr *ngFor="let item of xmlItems">   
      <td>{{item.type}}</td>   
      <td>{{item.covered}}</td>  
      <td>{{item.missed}}</td>    
      <td>{{item.percentage}}</td>  
       
    </tr>    
  </table>    
</div> 

4 - app.model.ts:

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

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

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

5- Output: