changeDetectorRef.markForCheck()

When using changeDetection: ChangeDetectionStrategy.OnPush, you need to call changeDetectorRef.markForCheck(). To avoid explicitly calling markForCheck, use async pipe on the observable variable. See line 13 on HTML below

@Component({
  selector: 'app-contact-us',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [JsonPipe, CommonModule, FormsModule, JsonPipe],
  templateUrl: './contact-us.html',
  styles: ``,
})

export class ContactUs implements OnInit {
  weather: any = null;
  weatherToo: any = null;
  weather$: any = null;
  weatherToo$: any = null;
  
  // not working
  // @Inject(ChangeDetectorRef) private readonly cdr!: ChangeDetectorRef;

  // working, but the obvious benefits are still not clear
  // private readonly cdr = inject(ChangeDetectorRef);

  constructor(private http: HttpClient, private cdr: ChangeDetectorRef) {}

  ngOnInit(): void  {
    this.http.get('/api/WeatherForecast').subscribe({
      next: value => {
        // console.log({value});
        this.weather = value;
        this.cdr.markForCheck(); // will reflect on the UI

        // use this when you need it be immediate, like in setTimeout or 3rd party library
        // this.cdr.detectChanges();
      },
      error: (err) => console.error('http error', err)
    });

    firstValueFrom(this.http.get('/api/WeatherForecast')).then(value => {
      this.weatherToo = value;
      this.cdr.markForCheck();
    });

    this.weather$ = this.http.get('/api/WeatherForecast');
    // this.weather$.subscribe({
    //   next: (value: any) => {
    //     console.log('see', {value});
    //   },
    //   error: (err: any) => console.error('http error', err)
    // });

    this.weatherToo$ = this.http.get('/api/WeatherForecast');
  }
}

<div>
  <hr/>
  This works:<br/>
  {{weather | json}}
  <hr/>
  This too:<br/>
  {{weatherToo | json}}
  <hr/>
  This too, and it implicitly calls changeDetectorRef.markForCheck():<br/>
  {{weather$ | async | json}}

  <hr/>
  This will not show null:<br/>
  <ng-container *ngIf="weatherToo$ | async as weatherWhenHaveValue">{{ weatherWhenHaveValue | json }}</ng-container>

  <hr/>
  <input [(ngModel)]="name" placeholder="Name"/>
</div>

Ask this on Gemini or ChatGPT and see the answer:

does this recommendation kinda defeat the purpose of optimization for when change detection should take effect?

Option 3: Use AsyncPipe in the template
This forces Angular to update on observable emissions, even in OnPush:

weather$ = this.http.get('/api/WeatherForecast');

{{ weather$ | json }}

Angular: proxy.conf.json; React: vite proxy

Angular

angular.json

        "serve": {
          "options": {
            "ssl": true,
            "sslKey": "ssl/key.pem",
            "sslCert": "ssl/cert.pem",
            "proxyConfig": "proxy.conf.json"
          },
          "builder": "@angular/build:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "react-analogous:build:production"
            },
            "development": {
              "buildTarget": "react-analogous:build:development"
            }
          },
          "defaultConfiguration": "development"
        },

proxy.conf.json
secure = false, just a self-signed certificate

{
  "/api": {
    "target": "https://localhost:7249",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

React

React's vite proxy

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

import fs from 'fs';

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    https: {
      key: fs.readFileSync('localhost-key.pem') ,
      cert: fs.readFileSync('localhost.pem'),
    },
    port: 3000,
    proxy: {
      '/api': { // This is the prefix for requests you want to proxy
        target: 'https://localhost:7249', // The URL of your backend API
        changeOrigin: true, // Rewrites the origin header to match the target URL
        // rewrite: (path) => path.replace(/^\/api/, ''), // Optional: remove '/api' from the request path sent to the backend
        secure: false, // Optional: if your backend uses HTTPS but has a self-signed certificate
        // agent: new http.Agent(), // Optional: if using HTTPS with a specific agent
      },
    },
  },
})

Angular: Type 'Event' is not assignable to type 'string'.

If this innocent-looking code

Color: <input [(ngModel)]="color" />

gives you this error:

Type 'Event' is not assignable to type 'string'.

Add FormsModule on imports:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    HoverHighlightDirective,
    // FormsModule, // uncomment this to remove the error: Type 'Event' is not assignable to type 'string'.
  ],
  templateUrl: './main.html',
})
export class App {
  name = 'Angular';

  color: string = 'blue';
}

bootstrapApplication(App);

Test code on stackblitz: https://stackblitz.com/edit/angular-jjw6g1cv?file=src%2Fmain.ts

React: Just JavaScript ternary; Angular: ng-container, ngIf, else, ng-template

React

import { useState } from 'react';
import './App.css';

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <>
      <h1>React conditional rendering</h1>

      {theme === 'light' ? (
        <>
          <div>Hello Lightness</div>
          <p></p>
        </>
      ) : (
        <>
          <div>Hello Darkness</div>
          <p></p>
        </>
      )}

      <hr />
      <button onClick={toggleTheme}>Toggle Theme (current: {theme})</button>
    </>
  );

  function toggleTheme() {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  }
}

export default App;

Angular

<h1>Angular Conditional Rendering</h1>

<ng-container *ngIf="theme === 'light'; else darkness">
  <div>Hello Lightness</div>
  <p></p>
</ng-container>

<ng-template #darkness>
  <div>Hello Darkness</div>
  <p></p>
</ng-template>

<br />
<button (click)="toggleTheme()">Toggle Theme (Current: {{theme}})</button>

import 'zone.js';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './main.html',
})
export class App {
  name = 'Angular';

  theme = 'light';

  toggleTheme() {
    this.theme = this.theme === 'light' ? 'dark' : 'light';
  }
}

bootstrapApplication(App);

Angular conditional rendering ◆ React conditional rendering

React: Context; Angular: @Injectable

Bootstrapping React

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { ThemeProvider } from './contexts/ThemeContext.tsx';

// Just for demo that context can reach even on children, grandchildren etc
function Main() {
  return <App></App>;
}

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ThemeProvider>
      <Main />
    </ThemeProvider>
  </React.StrictMode>
);

Bootstrapping Angular

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My app</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <main-root>Loading...</main-root>
  </body>
</html>

import 'zone.js';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AsyncPipe, NgStyle } from '@angular/common';

import { App } from './app/app';

@Component({
  selector: 'main-root',
  standalone: true,
  imports: [AsyncPipe, NgStyle, App],
  template: `<app-root></app-root>`,
})
// Just for demo that service can reach even on children, grandchildren etc
export class Main {
  name = 'Angular';
}

bootstrapApplication(Main);

React's App component

import './App.css';
import { useTheme } from './contexts/ThemeContext';

export default function App() {
  // Destructuring make names lose context
  // const { theme, toggleTheme } = useTheme();

  // I feel explicit is better, so things won't appear as local
  const themeContext = useTheme();

  const name = 'App';

  return (
    <div
      style={{
        background: themeContext.theme === 'dark' ? '#222' : '#eee',
        color: themeContext.theme === 'dark' ? '#eee' : '#222',
        padding: '2rem',
      }}
    >
      <h1>Hello from {name}!</h1>
      <h3 onClick={themeContext.toggleTheme}>
        {themeContext.theme.toUpperCase()} MODE
      </h3>
      <a target="_blank" href="https://react.dev/">
        Learn more about React
      </a>
    </div>
  );
}

Angular's app-root component

import { Component } from '@angular/core';
import { ThemeContext } from './contexts/theme.context';
import { AsyncPipe, NgStyle } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.html',
  imports: [NgStyle, AsyncPipe],
})
export class App {
  name = 'App';

  // This works too, just seems complicated, and also it looks like local properties
  // theme$: Observable<Theme>;
  // toggleTheme: () => void;

  // This works too, but it looks like local properties
  // get theme$() { return this.themeContext.theme$; }
  // toggleTheme() { this.themeContext.toggleTheme(); }

  constructor(public themeContext: ThemeContext) {
    // This works too, just seems complicated, and also it looks like local properties
    // ({theme$: this.theme$, toggleTheme: this.toggleTheme } = themeContext);
    // this.toggleTheme = this.toggleTheme.bind(themeContext);
    //
    // This works too, just seems complicated, and also it looks like local properties
    // this.theme$ = this.themeContext.theme$;
    // this.toggleTheme = this.themeContext.toggleTheme.bind(themeContext);
  }
}

<div
  [ngStyle]="{
  background: (themeContext.theme$ | async) === 'dark' ? '#222' : '#eee',
  color: (themeContext.theme$ | async) === 'dark' ? '#eee' : '#222',
  padding: '2rem'
}"
>
  <h1>Hello from {{ name }}!</h1>
  <h3 (click)="themeContext.toggleTheme()">
    {{(themeContext.theme$ | async)?.toUpperCase()}} MODE
  </h3>
  <a target="_blank" href="https://angular.dev/overview">
    Learn more about Angular
  </a>
</div>

React Context

import { createContext, ReactNode, useContext, useState } from 'react';

type Theme = 'light' | 'dark';

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light');

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );

  function toggleTheme() {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  }
}

export function useTheme(): ThemeContextType {
  const context = useContext(ThemeContext);

  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }

  return context;
}

Angular @Injectable

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

export type Theme = 'light' | 'dark';

@Injectable({
  providedIn: 'root',
})
export class ThemeContext {
  private themeSubject = new BehaviorSubject<Theme>('light');
  theme$ = this.themeSubject.asObservable();

  toggleTheme() {
    const newTheme = this.themeSubject.value === 'light' ? 'dark' : 'light';
    this.themeSubject.next(newTheme);
  }
}

React Context ◆ Angular @Injectable