user component

user

import { Component, OnInit, Input, ViewEncapsulation, ChangeDetectorRef, Output, EventEmitter } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user',
  encapsulation: ViewEncapsulation.Native,
  template: `
    {{user|json}}
  `,
  
})
export class UserComponent implements OnInit {
  public user;

  @Input()
  public set userId(id) {
    this.update(id);
  }
  
  public update(id) {
    this.http.get(`https://jsonplaceholder.typicode.com/users/${id}`)
      .subscribe((res: any) => {
        
        this.user = {
          name: res.name
        };

        this.cd.detectChanges(); // <--- WHY??? this is a bug. the user change and the template is not.
      });
  }

  constructor(public http: HttpClient,
    public cd: ChangeDetectorRef) {}

  ngOnInit() {}
}