title: An element access expression should take an argument
body: <p>I am new to Angular I have tried to create some sample application but getting error. Please help. I am trying to make my own from googles project (<a href="https://stackblitz.com/angular/ooqemvjyqkb?file=src%2Fapp%2Fheroes%2Fheroes.component.ts" rel="noreferrer">https://stackblitz.com/angular/ooqemvjyqkb?file=src%2Fapp%2Fheroes%2Fheroes.component.ts</a>)
  When I remove array from <code>users = User[];</code> it works fine but it does not give a build. (<code>[ts] Type 'User[]' is not assignable to type 'typeof User'</code>). With <code>users = User[];</code> it does not even compile. (suggestion [ts] An element access expression should take an argument.(any)) .</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  import { User } from '../user';
  import { UserService } from '../user.service';
  
  @Component({
    selector: 'app-users',
    templateUrl: './users.component.html',
    styleUrls: ['./users.component.css']
  })
  export class UsersComponent implements OnInit {
  
    selectedUser: User;
  
    users = User[]; // review use of array type. users = User[];
  
    constructor(
      private userService: UserService
      ) { }
  
    ngOnInit() {
      this.getUsers();
    }
  
    onSelect(user: User): void {
      this.selectedUser = user;
    }
  
    getUsers(): void {
      this.userService.getUsers()
      .subscribe(users =&gt; this.users = users);
    }
  
      save(): void {
      this.userService.updateUser(this.users);
    }
  
    add(name: string): void {
      console.log(name);
      name = name.trim();
      if (!name) { return; }
      this.userService.addUser({ name } as User)
        .subscribe(user =&gt; {
          this.users.push(user);
        });
    }
  }
  </code></pre>
  <p>////////////////////user.ts///////////////</p>
  <pre><code>export class User {
      id: number;
      name: string;
    }
  </code></pre>
  <p>///////////////user.service.ts////////////////</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable, of } from 'rxjs';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  import { User } from './user';
  // import { USERS } from '../assets/data/userData';
  
  const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  
  @Injectable({ providedIn: 'root' })
  
  export class UserService {
  
    private usersUrl = 'api/users';
  
    constructor(
      private http: HttpClient) { }
  
    getUsers(): Observable&lt;User[]&gt; {
      // return of(USERS);
      return this.http.get&lt;User[]&gt;(this.usersUrl);
    }
  
    /** GET user by id. Will 404 if id not found */
  getUser(id: number): Observable&lt;User&gt; {
    const url = `${this.usersUrl}/${id}`;
    return this.http.get&lt;User&gt;(url);
  }
  
  /** PUT: update the user on the server */
  updateUser (user: User): Observable&lt;any&gt; {
    return this.http.put(this.usersUrl, user, httpOptions);
  }
  
  /** POST: add a new user to the server */
  addUser (user: User): Observable&lt;User&gt; {
    return this.http.post&lt;User&gt;(this.usersUrl, user, httpOptions);
  }
  
  /* GET users whose name contains search term */
  searchUsers(term: string): Observable&lt;User[]&gt; {
    if (!term.trim()) {
      // if not search term, return empty hero array.
      return of([]);
    }
    return this.http.get&lt;User[]&gt;(`${this.usersUrl}/?name=${term}`);
  }
  
  }
  </code></pre>