Why queueScheduler do not change HostBinding value?

Question

component.html

<h1>value: {{value$ | async}}</h1>
<h2>className: {{className}}</h2>

component.ts

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TestComponent implements OnInit {
  value$!: Observable<string>;

  @HostBinding('class') className: string = '';

  ngOnInit(): void {
    this.value$ = of('hello').pipe(
      tap((value) => this.className = value + '-world'),
    );
  }
}

The code show both values in a browser, but doesn't change class property of host component.

After change the code of value$ property, all work:

this.value$ = of('hello').pipe(
  observeOn(asyncScheduler),
  tap((value) => this.className = value + '-world'),
);

Therefore two questions:

1. Why this is happening?
2. Is it good practice to use observeOn(asyncScheduler) on this case?