NetanelBasal

import Select from 'react-select';
import type { ComponentProps } from 'react';

@Component({
  standalone: true,
  imports: [CommonModule, ReactComponentDirective],
  template: `
    <h1>Todos page</h1>
    <button (click)="changeProps()">Change</button>
    <div [reactComponent]="Select" [props]="selectProps"></div>

NetanelBasal

import { ComponentProps, createElement, ElementType } from 'react';
import { createRoot } from 'react-dom/client';

@Directive({
  selector: '[reactComponent]',
  standalone: true
})
export class ReactComponentDirective<Comp extends ElementType> {
  @Input() reactComponent: Comp;
  @Input() props: ComponentProps<Comp>;

NetanelBasal

{
  "todos": {
     "entities": {  }
   },
   "cart": {
     "entities": {  }
   },
   "session": {
     "firstName": ""
   }

NetanelBasal

import { repeat } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MetricsService {
  private http = inject(HttpClient);

  getMetrics() {
    return this.http.get('https://metrics')
      .pipe(
        repeat({ delay: 30_000 }),

NetanelBasal

import { ApplicationRef, createComponent, EnvironmentInjector } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ToastService {

  constructor(
    private appRef: ApplicationRef,
    private injector: EnvironmentInjector
  ) { }

NetanelBasal

@Injectable({ providedIn: 'root' })
export class FeatureFlagGuard implements CanActivate {
  constructor(private userQuery: UserQuery) {
  }

  canActivate(route: ActivatedRouteSnapshot): boolean {
    return this.userQuery.hasFlags(route.data.flags);
  }
}

NetanelBasal

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

@Directive({
  selector: '[autofocus]'
})
export class AutofocusDirective {
  constructor(private host: ElementRef) {}

  ngAfterViewInit() {
    this.host.nativeElement.focus();

NetanelBasal

  openDialog<T>(dialogContent: Type<T>) {
    const footer = document.createElement('p');
    footer.innerText = 'footer';
    
    const dialogContentRef = createComponent(dialogContent, { 
      environmentInjector: this.injector 
    })

    const dialogRef = createComponent(DialogComponent, {
      environmentInjector: this.injector,

NetanelBasal

interface Profile {
  firstName: string;
  lastName: string;
  address: {
    street: string;
    city: string
  }
}

const profileForm = new FormGroup<ControlsOf<Profile>>({

NetanelBasal

class Observable {

  constructor(functionThatThrowsValues) {
    this._functionThatThrowsValues = functionThatThrowsValues;
  }

  subscribe(next, error, complete) {   
    if (typeof next === "function") {   
      return this._functionThatThrowsValues({
        next,