class Programmer : IEnableMuch {: June 2025

Friday, June 27, 2025

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

Thursday, June 26, 2025

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

Wednesday, June 25, 2025

Angular: @Input @Output; React: Just JavaScript

Angular @Input @Output

Parent HTML:

<div style="border: 1px solid green; padding: 10px;">
  <h2>Home Component</h2>
  <p>Routing message: {{ (routeData$ | async)?.message }}</p>
  <button (click)="increase()">Increase</button>
  <app-contact-us [phoneNumber]="myPhone.toString()" mainOffice="something" [initialEmployeeCount]="homeEmployeeCount"
    (onEmployeeCountChanged)="handleEmployeeCountChanged($event)"></app-contact-us>
  <hr />
  Parent employee count: {{homeEmployeeCount}}
  <br/>
</div>

Parent TypeScript:

import { AsyncPipe, JsonPipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { map, Observable, tap } from 'rxjs';
import { ContactUs } from './contact-us/contact-us';
import { HomeResolverData } from '../../resolvers/home.resolver';

@Component({
  selector: 'app-home',
  imports: [AsyncPipe, ContactUs],
  templateUrl: './home.html',
  styles: ``,
})
export class Home implements OnInit {
  /**
   *
   */

  myPhone = 1314;
  homeEmployeeCount = 7;

  routeData$!: Observable<HomeResolverData>;

  constructor(private route: ActivatedRoute) {
    // console.log(JSON.stringify(this.route.data));
    // console.log(this.routeData$);
  }
  ngOnInit(): void {
    this.routeData$ = this.route.data.pipe(
      map((resolved) => resolved['homeResolver'] as HomeResolverData),
      tap((data) =>
        console.log(
          'RESOLVER_DATA_CONSUMED: Resolver data is now available in component:',
          data
        )
      )
    );
  }

  increase() {
    ++this.myPhone;
  }

  handleEmployeeCountChanged($event: number) {
    this.homeEmployeeCount = $event;
  }
}

Child HTML:

<div>

  <h4>Contact Us</h4>


  Phone: {{phoneNumber}}<br/>
  Main Office: {{primaryOffice}}<br/>

  <button (click)="welcomeEmployee()">Welcome employee</button>
</div>

Child TypeScript:

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-contact-us',
  imports: [],
  templateUrl: './contact-us.html',
  styles: ``
})
export class ContactUs {
    @Input() phoneNumber = '';
    @Input('mainOffice') primaryOffice!: string;

    @Input() initialEmployeeCount = 0;
    @Output() onEmployeeCountChanged = new EventEmitter<number>();

    welcomeEmployee() {
      ++this.initialEmployeeCount;
      this.onEmployeeCountChanged.emit(this.initialEmployeeCount);
    }


}

React

Parent HTML+TypeScript:

import { useLoaderData } from "react-router";
import { ContactUs } from "./Home/ContactUs";
import { useState } from "react";

export default function Home() {
    const homeData = useLoaderData();

    const [myPhone, setMyPhone] = useState(1314);
    const [homeEmployeeCount, setHomeEmployeeCount] = useState(7);

    return (
        <>
            <h2>Home Component</h2>
            <p>Routing message: {homeData.message}</p>
            <button onClick={increase}>Increase</button>
            <ContactUs
                phoneNumber={myPhone.toString()}
                mainOffice="something"
                initialEmployeeCount={homeEmployeeCount}
                onEmployeeCountChanged={handleEmployeeCountChanged}
            />
            <hr />
            <button onClick={batchIncreaseFlawed}>Batch Increase Flawed</button>
            <button onClick={batchIncreaseCorrect}>
                Batch Increase Correct
            </button>
            <hr />
            Parent employee count: {homeEmployeeCount}
        </>
    );

    function handleEmployeeCountChanged(newCount: number) {
        setHomeEmployeeCount(newCount);
    }

    function batchIncreaseFlawed() {
        setMyPhone(myPhone + 1);
        setMyPhone(myPhone + 1);
        setMyPhone(myPhone + 1);
    }

    function batchIncreaseCorrect() {
        setMyPhone((prev) => prev + 1);
        setMyPhone((prev) => prev + 1);
        setMyPhone((prev) => prev + 1);
    }

    function increase() {
        setMyPhone((prev) => prev + 1);
    }
}

Child HTML+TypeScript:

import { useState } from "react";

type Params = {
    phoneNumber: string;
    mainOffice: string;
    initialEmployeeCount: number;
    onEmployeeCountChanged: (newCount: number) => void;
};

export function ContactUs({
    phoneNumber,
    mainOffice: primaryOffice,
    initialEmployeeCount,
    onEmployeeCountChanged,
}: Params) {
    const [employeeCount, setEmployeeCount] = useState(initialEmployeeCount);

    return (
        <div>
            <h4>Contact Us</h4>
            Phone: {phoneNumber} <br />
            Main Office: {primaryOffice}<br />
            
            <button onClick={welcomeEmployee}>Welcome employee</button>
        </div>
    );

    function welcomeEmployee() {
        setEmployeeCount((prev) => prev + 1);
        onEmployeeCountChanged(employeeCount);
    }
}

Angular: @Input @Output ◆ React's Angular @Input @Output

Sunday, June 22, 2025

.NET Middleware

Inline

app.Use(async (context, next) =>
{
    var logger = app.Services.GetRequiredService<ILoggerFactory>()
        .CreateLogger("RequestLogger");

    logger.LogInformation("inline HTTP {Method} {Path}{Query}",
        context.Request.Method,
        context.Request.Path,
        context.Request.QueryString);
    
    await next();
});

Function

app.Use(MyFuncMiddleware);
async Task MyFuncMiddleware(HttpContext context, Func<Task> next)

{
    var logger = app.Services.GetRequiredService<ILoggerFactory>()
        .CreateLogger("RequestLogger");

    logger.LogInformation("func HTTP {Method} {Path}{Query}",
        context.Request.Method,
        context.Request.Path,
        context.Request.QueryString);
    
    await next();
}

HOC

app.Use(MyHocMiddleware());
Func<HttpContext, Func<Task>, Task> MyHocMiddleware()
{
     var logger = app.Services.GetRequiredService<ILoggerFactory>()
         .CreateLogger("RequestLogger");
     
    return async (context, next) =>
    {
        logger.LogInformation("hoc HTTP {Method} {Path}{Query}",
            context.Request.Method,
            context.Request.Path,
            context.Request.QueryString);
    
        await next();
    };
}

Fluent HOC

app.UseMyFluentHocMiddleware();

public static class MyFluentHocMiddlewareExtensions
{
    // Extension method for IApplicationBuilder to register our custom middleware
    public static IApplicationBuilder UseMyFluentHocMiddleware(this IApplicationBuilder builder)
    {
        var logger = builder.ApplicationServices.GetRequiredService<ILoggerFactory>()
          .CreateLogger("RequestLogger");
        
        return builder.Use(async (context, next) => 
        {
            logger.LogInformation("fluent HTTP {Method} {Path}{Query}",
                 context.Request.Method,
                 context.Request.Path,
                 context.Request.QueryString);

             await next();
        });
    }
}

Fluent Class

app.UseMyFluentClassMiddleware();

// Constructor: The RequestDelegate representing the next middleware MUST be the first parameter.
// Other dependencies (like ILogger) are injected by the DI container.

public class MyClassMiddleware(RequestDelegate next, ILogger<MyClassMiddleware> logger)
{
    // Invoke or InvokeAsync method: This is where the actual middleware logic resides.
    // It must return Task and take HttpContext as the first parameter.
    public async Task InvokeAsync(HttpContext context)
    {
        logger.LogInformation("myClass HTTP {Method} {Path}{Query}",
            context.Request.Method,
            context.Request.Path,
            context.Request.QueryString);
        
        await next(context);

        // logger.LogInformation($"[Class Middleware] Outgoing response status: {context.Response.StatusCode}");
    }
}

// Optional: An extension method to make registering the class middleware more fluent
public static class MyClassMiddlewareExtensions
{
    public static IApplicationBuilder UseMyFluentClassMiddleware(this IApplicationBuilder builder)
    {
        return builder.UseMiddleware<MyClassMiddleware>();
    }
}

Open Source