title: x is not a function TypeScript 3.10.10 Angular 5.1.0
body: <p>I' developing some simple Quitz Application with Angular 5.1.0 and having issues to understand class methods calling when instance was passed as an argument through binding in component template. Let me be more specific. I have <code>Question</code> typescript class.</p>
  
  <pre><code>export class Question {
      constructor(
          public Id: number,
          public Title: string,
          public Text: string,
          public OriginalUrl: string,
          public Answers: Answer[]
      ){}
  
      public isAnsweredCorrectly():boolean {  
  
          for(let answer of this.Answers){
              if(
                  (!answer.IsCorrect &amp;&amp; answer.IsSelected) || 
                  (answer.IsCorrect &amp;&amp; !answer.IsSelected)) {
  
                  return false;
              }
          }
  
          return true;
      }
  }
  </code></pre>
  
  <p>It has <code>isAnsweredCorrectly()</code> method that calculates if the question was answered correctly. Then I have a <code>question-list</code> angular component that will highlight question item accordingly in a list. The component template looks like:</p>
  
  <pre><code>&lt;ul class="list-group h-100"&gt; 
  
      &lt;a class="list-group-item list-group-item-action" 
         *ngFor="let q of questions; let i = index;"
         [ngClass]="getClasses(q)"
         (click)="selectQuestion(q)"&gt;
         Question {{i+1}}
      &lt;/a&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>and the typescript code behind file is:</p>
  
  <pre><code>export class QuestionListComponent implements OnInit {
  
    @Input() questions:Question[];
    @Input() currentQuestion:Question;
  
    ...
  
    getClasses(question:Question):any{    
      return {
        'list-group-item-primary': question == this.currentQuestion,
        'list-group-item-success': question.isAnsweredCorrectly(),
        'list-group-item-danger': !question.isAnsweredCorrectly()
      };
    }
  }
  </code></pre>
  
  <p>The issue is with this <code>[ngClass]="getClasses(q)"</code> binding. When I'm not using any <code>new</code> keywords to create the instance of a <code>Question</code> and just pass it through binding I get <code>question.isAnsweredCorrectly is not a function</code> error. Why though? How do I call <code>isAnsweredCorrectly()</code> of a <code>Question</code> in <code>getClasses</code> component method?</p>
  
  <pre><code>QuestionListComponent.html:3 ERROR TypeError: question.isAnsweredCorrectly is not a function
      at QuestionListComponent.getClasses (question-list.component.ts:33)
      at Object.eval [as updateDirectives] (QuestionListComponent.html:5)
  </code></pre>
  
  <p><strong>// Updates:</strong></p>
  
  <p><code>@Input() questions:Question[];</code> array is populated using <code>HttpClient</code> of <code>HttpClientModule</code>. I get the <code>Exam</code> instance with a collection of questions through my <code>ExamService</code> that looks like this:</p>
  
  <pre><code>getExam(id:string):Observable&lt;Exam&gt;{
      const url = this.apiUrl + 'api/exams/' + id;
  
      return this.http.get&lt;Exam&gt;(url);
  }
  </code></pre>
  
  <p>The <code>Exam</code> class looks like:</p>
  
  <pre><code>export class Exam {
      constructor(
          public Id: number, 
          public Title: string, 
          public Questions:Question[]){
      }
  }
  </code></pre>