title: Angular 2 Interpolation for array not working
body: <p>Hi All i am new to Angular 2 and trying to build sample Todo app but i am stuck in middle. My interpolation for array is not working. Please help.</p>
  
  <p>This is my AppComponent.</p>
  
  <pre><code>import { Component,OnInit } from '@angular/core';
  import { Todo } from './todo';
  import { TodoDataService } from './todo-data.service';
  @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            providers:[TodoDataService],
            styleUrls: ['./app.component.css']
          })
  export class AppComponent implements OnInit{
     title = 'app';
     todos:Todo[];
  
  constructor(private todoDataService : TodoDataService){
      this.todos=[];
      let todon:Todo=new Todo();
      todon.titile=this.title;
      this.todos.push(todon);
  }    
  
  addToDo(title:string){
         let todon:Todo=new Todo();
         todon.titile=title;
         this.todos.push(this.todoDataService.addTodo(todon));
         console.log(this.todos);
  }   
  ngOnInit() {
    this.todos=[];
   }
  }
  </code></pre>
  
  <p>My AppModule is as follows:</p>
  
  <pre><code> import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { TodoDataService } from './todo-data.service';
  
      import { AppComponent } from './app.component';
  
      @NgModule({
        declarations: [
          AppComponent
        ],
        imports: [
          BrowserModule
        ],
        providers: [TodoDataService],
        bootstrap: [AppComponent]
      })
      export class AppModule { }
  </code></pre>
  
  <p>My Todo class:</p>
  
  <pre><code>export class Todo {
       id:number;
       titile:string='';
       complete:boolean;
  
       constructor(values:Object={}){
                  Object.assign(this,values);
       }
  }
  </code></pre>
  
  <p>My TodoDataService class</p>
  
  <pre><code>    import { Injectable } from '@angular/core';
      import { Todo } from './todo';
  
  // Here i am just incrementing lastid and returing new todo object each time
      @Injectable()
      export class TodoDataService {
  
          lastId:number =0;
  
  
  
        constructor() { }
  
  
        addTodo(todo:Todo):Todo{
          console.log(todo);
          if(!todo.id)
              todo.id = ++this.lastId;
  
          return todo;
        }
  
      }
  </code></pre>
  
  <p>Finally html file</p>
  
  <pre><code>&lt;!--My input text field and ngIf and ngFor directives--&gt;
  &lt;div style="text-align:center"&gt;
  &lt;input type="text" (keyup.enter)="addToDo(inputtext.value)" #inputtext&gt;
  
  &lt;!-- &lt;div *ngIf="todos.legnth &gt; 0"&gt;
  &lt;ul&gt;
  &lt;li *ngFor="let todo of todos"&gt;
  &lt;label&gt;{{todo.title}}&lt;/label&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt; --&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;div&gt;
  &lt;p&gt;{{ todos }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see above i tried all things but it is not getting displayed. Also i want to display all array data only if my array size is greater than 0. That also not working. Please provide your valuable inputs and suggestions.</p>