Armenvardanyan95

// great actions allow us to fully 
// understand how data changes and depends 
// on each other in our applciation
const loadTodos$ = createEffect(() => {
  const actions = inject(Actions);
  const todoService = inject(TodoService);
  
  return actions.pipe(
    // this tells us all the situations
    // when a todo list must be refetched

Armenvardanyan95

// bad actions lead to harder 
// to understand reducers/effects 
const loadTodos$ = createEffect(() => {
  const actions = inject(Actions);
  const todoService = inject(TodoService);
  
  return actions.pipe(
    // this sounds like a command
    // it gives us no idea about when
    // the todos will be loaded

Armenvardanyan95

@Component({
  template: `
    <form #form="ngForm" (submit)="onSubmit(form)">
      <input type="text" name="name" [(ngModel)]="controls.name" />
      <input type="email" name="email" [(ngModel)]="controls.email" />
      <input type="number" name="age" [(ngModel)]="controls.age" />
      <button type="submit">Submit</button>
    </form>
  `,
})

Armenvardanyan95

// instead of this:
@Component({
    template: `
        <form (submit)="onSubmit()">
            <input type="text" name="name" [(ngModel]="form.name" />
            <input type="email" name="email" [(ngModel]="form.email" />
            <input type="number" name="age" [(ngModel)]="form.age" />
            <button type="submit">Submit</button>
        </form>
    `,

Armenvardanyan95

function todoStore() {
  const allTodos = signal<ToDo[]>(
    JSON.parse(localStorage.getItem("todos") ?? "[]")
  );
  const query = signal("");
  const newTodoName = signal("");
  const showCompletedTodos = signal(false);
  const todos = computed(() => {
    return allTodos().filter((todo) => {
      return (

Armenvardanyan95

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
  ngOnInit() {
    fromEvent(document.body, 'click')
      .pipe(take(10))
      .subscribe(console.log);
  }

Armenvardanyan95

of(1, 2, 3, 4).pipe(take(3)).subscribe(console.log);

Armenvardanyan95

fromEvent(document.querySelector('input'), 'input').pipe(
  debounceTime(300),
  map(event => (event.target as HTMLInputElement).value),
  switchMap(query => getData(query).pipe(
    switchAll(),
    map(({firstName, lastName}) => firstName + ' ' + lastName),
    toArray(),
  )),
).subscribe(console.log);

Armenvardanyan95

fromEvent(document.querySelector('input'), 'input').pipe(
  debounceTime(300),
  map(event => (event.target as HTMLInputElement).value),
  switchMap(query => getData(query)),
  switchAll(),
  map(({firstName, lastName}) => firstName + ' ' + lastName),
  toArray(),
).subscribe(console.log);

Armenvardanyan95

fromEvent(document.querySelector('input'), 'input').pipe(
  debounceTime(300),
  map(event => (event.target as HTMLInputElement).value),
  switchMap(query => getData(query)),
).subscribe(console.log);