title: Angular: ERROR TypeError: Cannot read property ___ of undefined
body: <p>I'm getting these errors even though the values renders in the browser. I'm not sure how to fix this.</p>
  <blockquote>
  <p>ERROR TypeError: Cannot read property 'length' of undefined</p>
  <p>ERROR TypeError: Cannot read property 'FirstName' of undefined</p>
  </blockquote>
  <p><strong>Component.ts:</strong></p>
  <pre><code>teams: Team[];
  
  ngOnInit() {
    this.getTeams();
  }
  
  constructor(private m: DataManagerService, private router: Router) { 
  }
  
  getTeams(): void {
    this.m.getTeams().subscribe(teams =&gt; this.teams = teams);
  }
  
  select(em: Team){
    this.router.navigate(['/teamView',em._id]);
  }
  </code></pre>
  <p><strong>Component.html:</strong></p>
  <pre><code>&lt;div class=&quot;panel-body&quot;&gt;
    &lt;table class=&quot;table table-striped&quot;&gt;
      &lt;tr&gt;
        &lt;th&gt;Team name&lt;/th&gt;
        &lt;th&gt;Name of Team Leader&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr *ngFor='let team of teams' (click)=&quot;select(team)&quot;&gt;
        &lt;td&gt;{{team.TeamName}}&lt;/td&gt;
        &lt;td&gt;{{team.TeamLead.FirstName}} {{team.TeamLead.LastName}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;hr&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Team.ts:</strong></p>
  <pre><code>export class Team {
      _id: string;
      TeamName: string;
      TeamLead: Employee;
      Projects:{};
      Employees: {};
  }
  </code></pre>
  <p><strong>Object:</strong></p>
  <blockquote>
  <p><a href="https://lit-coast-73093.herokuapp.com/teams" rel="nofollow noreferrer">https://lit-coast-73093.herokuapp.com/teams</a></p>
  </blockquote>
  <p><strong>DataManagerService.ts</strong></p>
  <pre><code>teams: Team[];
  projects: Project[];
  employees: Employee[];
  
  constructor(private http: HttpClient) { 
  }
  
  getTeams(): Observable&lt;Team[]&gt; {
      return this.http.get&lt;Team[]&gt;(`${this.url}/teams`)
    }
  
  getProjects(): Observable&lt;Project[]&gt; {
      return this.http.get&lt;Project[]&gt;(`${this.url}/projects`)
  }
  
  getEmployees(): Observable&lt;Employee[]&gt; {
      return this.http.get&lt;Employee[]&gt;(`${this.url}/employees`)
  }
  </code></pre>