title: Angular:: error TS2532: Object is possibly 'undefined'
body: <p>I was doing the angular Tour-hero project(replaced Hero with 'User'). There when I made the Hero(User) and Hero-detail(User-detail) separate and when I tried to access the details, it is not showing and the update function also doesn't work. It is showing this error:</p>
  <blockquote>
  <p>error TS2532: Object is possibly 'undefined'.</p>
  <p>6         &lt;input id=&quot;user-name&quot; [(ngModel)]=&quot;user.name&quot;
  placeholder=&quot;name&quot;&gt;</p>
  </blockquote>
  <p>The <code>user</code> object is,I think, giving the problem. But when I tried to do it exactly like the tutorial with the addition of MessageService and all,it works. But when I removed all that,it is giving this error.
  Thanks in advance for the help.</p>
  <p>user-detail.component.html:</p>
  <pre><code>&lt;div&gt;
    &lt;h2&gt;{{user.name | uppercase}} Details&lt;/h2&gt;
    &lt;div&gt;&lt;span&gt;id: &lt;/span&gt;{{user.id}}&lt;/div&gt;
    &lt;div&gt;
          &lt;label for=&quot;user-name&quot;&gt;User name: &lt;/label&gt;
          &lt;input id=&quot;user-name&quot; [(ngModel)]=&quot;user.name&quot; placeholder=&quot;name&quot;&gt;
      &lt;/div&gt;
      &lt;button (click)=&quot;goBack()&quot;&gt;Back&lt;/button&gt;
      &lt;button (click)=&quot;save()&quot;&gt;Save&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>user-detail.component.ts:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { User } from 'src/app/model/user';
  import { UserService } from 'src/app/services/user/user.service';
  import { Location } from '@angular/common';
  import { ActivatedRoute } from '@angular/router';
  
  
  @Component({
    selector: 'app-user-detail',
    templateUrl: './user-detail.component.html',
    styleUrls: ['./user-detail.component.scss']
  })
  export class UserDetailComponent implements OnInit {
    user?: User
  
    constructor(
      private userService: UserService,
      private location: Location,
      private route: ActivatedRoute
    ) { }
  
    ngOnInit(): void {
      this.getUser();
    }
  
    getUser(): void {
      const id =
       parseInt(this.route.snapshot.paramMap.get('id')!, 1);
      this.userService.getUser(id)
        .subscribe(user =&gt; this.user = user);
    }
  
    goBack(): void {
      this.location.back();
    }
  
    save():void {
      if(this.user){
        this.userService.updateUser(this.user)
          .subscribe(() =&gt; this.goBack())
      }
    }
  
  }
  </code></pre>
  <p>user.service.ts:</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { User } from 'src/app/model/user';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Observable, of } from 'rxjs';
  import { catchError } from 'rxjs/operators';
  
  @Injectable({
    providedIn: 'root'
  })
  export class UserService {
    
    private usersUrl = 'api/users/';
  
    httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/json'})
    };
  
    getUsers(): Observable&lt;User[]&gt; {
      return this.http.get&lt;User[]&gt;(this.usersUrl).pipe(
        catchError(this.handleError&lt;User[]&gt;('getUsers',[]))
      );
    }
  
    /** GET hero 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).pipe(
        catchError(this.handleError&lt;User&gt;(`getUser id=${id}`))
      );
    }
  
    updateUser(user: User): Observable&lt;any&gt; {
      return this.http.put(this.usersUrl, user, this.httpOptions)
      .pipe(
          catchError(this.handleError&lt;User[]&gt;('getUsers',[]))
      );
    }
  
    addUser(user: User): Observable&lt;User&gt;{
      return this.http.post&lt;User&gt;(this.usersUrl, user, this.httpOptions)
        .pipe(
          catchError(this.handleError&lt;User&gt;('addUser'))
        )
    }
  
    deleteUser(id: number): Observable&lt;User&gt;{
      const url = `${this.usersUrl}/${id}`;
  
      return this.http.delete&lt;User&gt;(url, this.httpOptions).pipe(
        catchError(this.handleError&lt;User&gt;('deleteUser'))
      )
    }
  
    constructor(private http: HttpClient) { }
  
    private handleError&lt;T&gt;(operation = 'operation', result?:T){
      return (error: any): Observable&lt;T&gt; =&gt; {
        console.error(error);
        return of(result as T);
      }
    }
  }
  </code></pre>