Hold content from showing until XML is loaded?

Hiya!

So I got an XML to load right at the start of an app, and the general design needs data from said XML to keep the design consistent; for example: the color of a button.

So the XML is loaded like this:

constructor (){
   this.http.get('assets/data/sectionColors.xml')
      .map(res => res.text())
      .subscribe((data)=>
      {
         this.parseXML(data)
         .then((data)=>
         {
            this.sectionColors = data;
            console.log(this.sectionColors);
         });
   });
}

parseXML(data){
    return new Promise(resolve =>
    {
       var k,
        arr    = [],
        parser = new xml2js.Parser(
        {
            trim: true,
            explicitArray: true
        });

        parser.parseString(data, function (err, result)
        {
            var obj = result.sectionColors;
            for(k in obj.section)
            {
               var item = obj.section[k];
               arr.push({
                  id		: item.id[0],
                  color    : item.color[0]
               });
            }

            resolve(arr);
         });
      });
   }

Note that the constructor calls parseXML and then assigns the any variable sectionColors with the result of the parsing.

And if I want to change the color of a button in the HTML, I go:

<button [style.background]="sectionColors[0]">Press Me!</button>

I get an error seemingly because the XML data hasn’t been loaded by the time I’m showing the page. So, is there a way to hold the page from showing until the XML has been parsed? Thanks in advance!