Формат текста меняется при отображении в панели начальной загрузки

Question

Я пытаюсь получить данные, представляющие собой файл java, из моего репозитория Github, используя Github api и отображаемый на панели в пользовательском интерфейсе моего углового приложения. Проблема в том, что он печатает в правильном формате в консоли, но когда он отображается в приложении, он отображается как большая строка все вместе.

Компонент вызывает метод getCode github.service.ts для получения данных и установки объекта Question, который отображается на странице пользовательского интерфейса.

github.service.ts метод getCode

getCode(url: string){

    return this.http.get(url)
        .subscribe(
            (response)=>{
                console.log('-----------------getCode-----------');
                console.log(atob(response.json().content));
                this.questionDetails = new Question(response.json().name,response.json().url,
                    response.json().html_url,atob(response.json().content));
                console.log('questionDetails:'+this.questionDetails.name+"::"+this.questionDetails.url)    
            }
        )
}

Интерфейс, в котором отображаются данные.

<div class="container-fluid">
    <div class="row">
      <div class="col col-xl-12">
        <p *ngIf="isFetching"> Loading...</p>
        <div class="panel panel-primary" *ngIf="!isFetching">
            <div class="panel panel-heading">{{ questionDetails.name }}</div>
            <div class="panel panel-body">{{  questionDetails.code 
            }}</div>
        </div>
      </div>
    </div>
</div>

questionDetails.code - это значение, являющееся содержимым Java-файла.