import { Component } from '@angular/core';

@Component({
  selector: 'random',
  templateUrl: './random.component.html',
})
export class RandomComponent {
  // bla bla bla code

  updateRandomData() {
    
    ...
    
    // DO NOT REMOVE!!!
    // for some reason angular won't detect changes, using setTimeout as a last resort, YOLO!
    setTimeout(() => {
      this.randomData = 'Updated random data';
    }, 0);
  }
}

// Complex search stream
const searchStream$ = input$.pipe(
  switchMap(query =>
    merge(refresh$, autoRefresh$).pipe(
      startWith(null), // initial fetch
      withLatestFrom(of(query)),
      tap(([_, q]) => console.log('Preparing fetch for:', q)),
      concatMap(([_, q]) =>
        from(fetchData(q)).pipe(
          retryWhen(errors =>
            errors.pipe(
              tap(err => console.warn('Retrying due to error:', err)),
              delay(1000)
            )
          ),
          catchError(err => of(`Failed to fetch: ${err}`)),
          map(result => ({ query: q, result })), // enrich data
          tap(data => console.log('Fetched data object:', data)),
          scan((acc, curr) => [...acc, curr.result], []), // accumulate results
          tap(acc => console.log('Accumulated results:', acc)),
          shareReplay(1), // replay last result for late subscribers
        )
      ),
      finalize(() => console.log(`Cleaning up stream for query: ${query}`))
    )
  ),
  exhaustMap(data => of(data).pipe(
    tap(d => console.log('Passing data to final consumer:', d))
  )),
  takeUntil(interval(30000)), // auto-unsubscribe after 30s
);

import { of, combineLatest, concat } from 'rxjs';
import { delay, startWith } from 'rxjs/operators';

// Simulate loading states: true -> false
const loading$ = of(true).pipe(
  concat(of(false).pipe(delay(1000)))
);

// Simulate a data fetch that takes 2s
const data$ = of(['Item A', 'Item B']).pipe(delay(2000), startWith([]));

// Combine latest
combineLatest([data$, loading$]).subscribe(([data, loading]) => {
  console.log({ loading, data });
});


//  { loading: true, data: [] }
//  { loading: false, data: [] } ← glitch!
//  { loading: false, data: ['Item A','Item B'] }

const bookTitle = "Alchemy for beginners";

const chaptersTitles = [ "Equipment" ]

let book = {
    title: bookTitle,
    chapters: chapterTitles
  }

.....
      

@Component({
  selector: 'todo-item',
  template: `
    @for(let todo of todos; track $index) {
      <div class="todo">
        {{todo.owner.firstname}} - {{todo.description}} <br />
        completed: {{todo.completed}}
      </div>
      <button (click)="completeTodo(todo.id)">COMPLETE</button>
    }`
})
class TodosComponent implements OnInit{
  #http = inject(Http)

  todos:Todo[] = [];

  ngOnInit() {
    this.#http.get('/todos')
      .subscribe(todos => this.todos = todos);
  
    setTimeout(() => {/*some other changes*/})
  }
  
  completeTodo(id: number) { ... }
}

todos$ = this.#http.get('/todos') // uses XMLHttpRequest

$todos = new behaviourSubject(null)
addTodo(todo) { // click -> addEventListener
  this.$todos.next([...this.$todos.value, todo])
}

ngOnInit() {
  setTimeout() { // timer API
     this.$todos.next([...])
  }
}

import { signal, computed, effect } from '@angular/core';

const price = signal(100);
const quantity = signal(2);

const total = computed(() => price() * quantity());

effect(() => {
  console.log(`Total cost: $${total()}`);
});

price.set(120);   // Logs: "Total cost: $240"
quantity.update(q => q + 1); // Logs: "Total cost: $360"