good-dumb-components-example.ts

// wrong (impure)
class DateTimePickerComponent {
  timeZone: string = "Europe/Warsaw";

  constructor(private account: AccountService) {
    if (this.account.currentUser) {
      this.timeZone = this.account.currentUser.timeZone;
    }
  }

  changeTimeZone(timeZone: string) {
    this.timeZone = timeZone;
    this.account.updateCurrentUser({
      timeZone
    });
  }
}

// good (pure)
class DateTimePickerComponent {
  @Input() timeZone: string = "Europe/Warsaw";
  @Output() timeZoneChange: EventEmitter<string> = new EventEmitter();

  changeTimeZone(timeZone: string) {
    this.timeZoneChange.emit(timeZone);
  }
}