title: angular 2 - TypeError: Cannot read property
body: <p>I am new to Angular.While running angular code,getting below error in console.</p>
  
  <pre><code>AppComponent.html:2 ERROR TypeError: Cannot read property 'colourPreference' of undefined
      at AppComponent.get [as colour] (app.component.ts:22)
      at Object.eval [as updateDirectives] (AppComponent.html:6)
      at Object.debugUpdateDirectives [as updateDirectives] (services.ts:443)
      at checkAndUpdateView (view.ts:359)
  
  
  </code></pre>
  
  <p><strong>app.componenet.ts:</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { UserPreferencesService } from './UserPreferences.service';
  import { FormsModule } from '@angular/forms';
  @Component({
    selector: 'my-app',
    template: `
    &lt;h1&gt;This is the home page&lt;/h1&gt;
    &lt;div&gt;
    Colour preferences:
    &lt;input type='text' [(ngModel)]='colour' [style.background]='colour'/&gt;
    &lt;/div&gt;
    `
  })
  export class AppComponent { 
    constuctor(private _userPreferencesService: UserPreferencesService){
  
    }
    get colour():string{
      return this._userPreferencesService.colourPreference;
    }
  
    set colour(value: string){
      this._userPreferencesService.colourPreference=value;
    }
   }
  </code></pre>
  
  <p><strong>UserPreferences.service.ts</strong></p>
  
  <pre><code>
  import {Injectable} from '@angular/core';
  
  @Injectable()
  export class UserPreferencesService{
  colourPreference: string ='orange';
  }
  
  
  </code></pre>
  
  <p>Is anyone have the solution for above problem.Thanks in advance!!</p>