How to display Object data correctly to view in Angular 2

I am learning Angular 2 and I am stumbled in one of my views that it's weird to see.

inside my ts code I have:

import { CompanyService } from '../../services/company.service';
import { Company } from '../../models/company';    
export class TestEssayComponent implements OnInit {
        company: Company;
        constructor(private companyService: CompanyService){}
    ngOnInit() {
        this.getCompany();
      }
    getCompany(){
        var company_id: number;
        company_id = parseInt(localStorage.getItem('company_id'));
        this.companyService.getById(company_id).subscribe(
          data => {
            var company = new Company;
            company = data.data;
            this.company = company;
            console.log(this.company);
          }
        );
     }
}

And in the html file I have:

<section class="content-header">
    <h1>New Test <small>{{company.name}}</small></h1>
</section>

And then this gives an error "name of undefined" but when I replace it with:

<section class="content-header">
        <h1>New Test <small>{{company}}</small></h1>
    </section>

this will show [object Object]. And in the console, data is filled. So how to display it correctly in view?