NetanelBasal

@Directive({
  standalone: true,
  selector: 'img[rawSrc]',
})
export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
  private imageLoader = inject(IMAGE_LOADER);
  private renderer = inject(Renderer2);
  private imgElement: HTMLImageElement = inject(ElementRef).nativeElement;
  private injector = inject(Injector);
  

NetanelBasal

export class AppComponent {
  private foo = inject(FOO) // typed as string
  private bar = inject(BAR, { optional: true }) // typed as string | null
  private http = inject(HttpClient) // typed as HttpClient
  private todosService = inject(TodosService) // typed as TodosService
}

NetanelBasal

export class AppComponent {
  private foo = inject(FOO)
  private bar = inject(BAR, { optional: true })
  private http = inject(HttpClient);
  private todosService = inject(TodosService);
}

NetanelBasal

export class AppComponent {
  constructor(
    @Inject(FOO) private foo: string,
    @Optional() @Inject(BAR) private bar: string | null,
    private http: HttpClient,
    private todosService: TodosService
  ) { }
}

NetanelBasal

import { Component, ElementRef, inject } from '@angular/core';

import { App } from '@myorg/app-name';
import { NgReact } from '@myorg/ng-react';

@Component({
  standalone: true,
  template: ``
})
export class TodosPageComponent {

NetanelBasal

import NxWelcome from './nx-welcome';

export function App() {
  return (
    <>
      <NxWelcome title="react-platform" />
      ...
    </>
  );
}

NetanelBasal

// ... THE CONTEXT CODE IS ABOVE ...

@Injectable({ providedIn: 'root' })
export class NgReact {
  injector = inject(Injector);

  createRoot(host: HTMLElement) {
    return createRoot(host);
  }

NetanelBasal

import { Injector } from '@angular/core';
import { PropsWithChildren, createContext, useContext } from 'react';
import { createRoot, Root } from 'react-dom/client'

const InjectorCtx = createContext<Injector | null>(null)

export function NgContext(props: PropsWithChildren<{ injector: Injector }>) {
  return createElement(InjectorCtx.Provider, {
    children: props.children,
    value: props.injector

NetanelBasal

import { CommonModule } from '@angular/common';
import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
import type { ComponentProps } from 'react';

@Component({
  standalone: true,
  imports: [CommonModule, LazyReactComponentDirective],
  template: `
    <h1>Todos page</h1>
    <button (click)="showSelect = true">Show React Component</button>

NetanelBasal

import { Directive, ElementRef, Input } from '@angular/core';
import type { ComponentProps, ElementType } from 'react';
import type { Root } from 'react-dom/client';

@Directive({
  selector: '[lazyReactComponent]',
  standalone: true
})
export class LazyReactComponentDirective<Comp extends ElementType> {
  @Input() lazyReactComponent: () => Promise<Comp>;