title: Angular2 - Error when I try to render a value on page
body: <p>I have this simple code in my component.html page that doesn't work:</p>
  <h1>html component code</h1>
  <pre><code>&lt;p class=&quot;form-control-static&quot;&gt;&lt;b&gt;{{_idOffert}} - {{offert.idOffert}}&lt;/b&gt;&lt;/p&gt;
  </code></pre>
  <h1>component.ts</h1>
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { Offert } from &quot;../model/offert&quot;;
  import { Router,  ActivatedRoute } from &quot;@angular/router&quot;;
  import { OffertService } from &quot;../services/offert.service&quot;;
  import { AuthService } from &quot;../services/auth.service&quot;;
  
  @Component({
    selector: 'app-offert-detail',
    templateUrl: './offert-detail.component.html',
    styleUrls: ['./offert-detail.component.css']
  })
  export class OffertDetailComponent implements OnInit {
  
    @Input() _idOffert: number;
  
    offert:Offert;
    test:string;
    errorMessage: string;
  
    constructor(
      private offertService: OffertService,
      private router: Router,
      private route: ActivatedRoute,
      private authService: AuthService) { 
  
        if (!this.authService.isLoggedIn()) {
          this.router.navigate([&quot;&quot;]);
        }
  
      }
      
    ngOnInit() {
          
      this.route.params.subscribe(params =&gt;{
        this._idOffert = params['idOffert'];
      });
      
      var s = null;
      
      s = this.offertService.GetOffertDetail(0, this._idOffert);    
      
      s.subscribe(
        res =&gt; {
          this.test = res.header['title'];
          this.offert = res.header;                        
        },
        error =&gt; this.errorMessage = &lt;any&gt;error
      );
          
    }
  
  }
  </code></pre>
  <p>The <strong>_idOffert</strong> variable is showed properly but <strong>offert.idOffert</strong> no.</p>
  <p>If I check on the console log, I find this:</p>
  <h2>ERROR</h2>
  <pre><code>19:47:36.003 ERROR Error: Uncaught (in promise): TypeError: co.offert is undefined
  View_OffertDetailComponent_0/&lt;@ng:///AppModule/OffertDetailComponent.ngfactory.js:1707:9
  debugUpdateRenderer@http://localhost:4200/vendor.bundle.js:13428:12
  checkAndUpdateView@http://localhost:4200/vendor.bundle.js:12807:5
  callViewAction@http://localhost:4200/vendor.bundle.js:13117:17
  execComponentViewsAction@http://localhost:4200/vendor.bundle.js:13063:13
  checkAndUpdateView@http://localhost:4200/vendor.bundle.js:12808:5
  callWithDebugContext@http://localhost:4200/vendor.bundle.js:13790:39
  debugCheckAndUpdateView@http://localhost:4200/vendor.bundle.js:13330:12
  ViewRef_.prototype.detectChanges@http://localhost:4200/vendor.bundle.js:10899:54
  RouterOutlet.prototype.activateWith@http://localhost:4200/vendor.bundle.js:21311:9
  ActivateRoutes.prototype.placeComponentIntoOutlet@http://localhost:4200/vendor.bundle.js:20491:9
  ActivateRoutes.prototype.activateRoutes@http://localhost:4200/vendor.bundle.js:20472:21
  ActivateRoutes.prototype.act…
  Analisi dello stack:
  resolvePromise@http://localhost:4200/polyfills.bundle.js:6638:31 [angular]
  resolvePromise@http://localhost:4200/polyfills.bundle.js:6609:17 [angular]
  scheduleResolveOrReject/&lt;@http://localhost:4200/polyfills.bundle.js:6686:17 [angular]
  NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner&lt;.onInvokeTask@http://localhost:4200/vendor.bundle.js:4893:28 [angular]
  ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:6323:17 [angular]
  Zone.prototype.runTask@http://localhost:4200/polyfills.bundle.js:6091:28 [&lt;root&gt; =&gt; angular]
  drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:6519:25 [&lt;root&gt;]
  ZoneTask/this.invoke@http://localhost:4200/polyfills.bundle.js:6390:25 [&lt;root&gt;]
   1 vendor.bundle.js:1861:5
      defaultErrorLogger http://localhost:4200/vendor.bundle.js:1861:5
      ErrorHandler.prototype.handleError http://localhost:4200/vendor.bundle.js:1921:9
      PlatformRef_.prototype._bootstrapModuleFactoryWithZone/&lt;/&lt;.next http://localhost:4200/vendor.bundle.js:5531:69
      EventEmitter.prototype.subscribe/schedulerFn&lt; http://localhost:4200/vendor.bundle.js:4605:36
      SafeSubscriber.prototype.__tryOrUnsub http://localhost:4200/vendor.bundle.js:390:13
      SafeSubscriber.prototype.next http://localhost:4200/vendor.bundle.js:339:17
      Subscriber.prototype._next http://localhost:4200/vendor.bundle.js:279:9
      Subscriber.prototype.next http://localhost:4200/vendor.bundle.js:243:13
      Subject.prototype.next http://localhost:4200/vendor.bundle.js:15226:17
      EventEmitter.prototype.emit http://localhost:4200/vendor.bundle.js:4591:54
      NgZone.prototype.triggerError http://localhost:4200/vendor.bundle.js:4962:56
      NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner&lt;.onHandleError http://localhost:4200/vendor.bundle.js:4923:17
      ZoneDelegate.prototype.handleError http://localhost:4200/polyfills.bundle.js:6295:17
      Zone.prototype.runGuarded http://localhost:4200/polyfills.bundle.js:6067:25
      drainMicroTaskQueue/_loop_1 http://localhost:4200/polyfills.bundle.js:6530:25
      drainMicroTaskQueue http://localhost:4200/polyfills.bundle.js:6539:21
      ZoneTask/this.invoke http://localhost:4200/polyfills.bundle.js:6390:25
  </code></pre>
  <p>I don't know why it is not working...</p>
  <p>If I try instead to render just <strong>{{offert}}</strong> it shows &quot;[object Object]&quot;...</p>
  <p>Thanks to support</p>