Let's say I have 2 pages: first, that creates data (transaction) and second that displays the users in table. I also have navigation to those subpages ('/create-transaction' and '/transactions'). I create a transaction, it adds to the database (Postgres) so I move to the /users subpage to see the result. After clicking on link, I cannot see anything... After refreshing the page with F5 or clicking the link in the navigation again, the data displays. I want to know why they are not displayed right away. after moving to the subpage.

transactions-list.ts and create-transaction.ts

import { Component, inject, OnInit, signal } from '@angular/core';
import { NgClass } from '@angular/common';
import { TransactionsService } from '../../../core/services/transactions';
import { Transaction } from '../../../core/models/transaction.model';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-transaction-list',
  standalone: true,
  imports: [NgClass, CommonModule],
  templateUrl: './transaction-list.html',
  styleUrl: './transaction-list.scss',
})
export class TransactionList implements OnInit {
  loading = signal(false);
  
  private readonly transactionsService = inject(TransactionsService);
  transactions: Transaction[] = [];

  ngOnInit(): void {
    this.loadTransactions();
  }

  loadTransactions(): void {
    this.loading.set(true);
    this.transactions = [];

    this.transactionsService.getTransactions().subscribe({
      next: (data) => {
        console.log('Transactions loaded:', data);
        this.transactions = [...data];
        this.loading.set(false);
      },
      error: (error) => {
        console.error('Error loading transactions:', error);
        this.loading.set(false);
      }
    });
  }
}

import { Component, EventEmitter, inject, Output, signal } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { CategoriesService } from '../../../core/services/categories';
import { Category } from '../../../core/models/category.model';
import { TransactionsService } from '../../../core/services/transactions';
import { Transaction } from '../../../core/models/transaction.model';

@Component({
  selector: 'app-create-transaction-form',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './create-transaction-form.html',
  styleUrl: './create-transaction-form.scss',
})
export class CreateTransactionForm {
  // private fb = inject(FormBuilder);
  private readonly fb = inject(FormBuilder);
  private readonly transactionsService = inject(TransactionsService);

  @Output() transactionCreated = new EventEmitter();

  private readonly categoriesService = inject(CategoriesService);
  categories: Category[] = [];

  loading = signal(false);

  form = this.fb.nonNullable.group({
    transactionName: ['', [Validators.required, Validators.minLength(2)]],
    transactionType: ['income'],
    transactionAmount: ['', [Validators.required, Validators.min(0.01)]],
    transactionCategory: ['', [Validators.required]],
    transactionDate: ['', [Validators.required]],
    transactionDescription: [''/*, [Validators.required, Validators.maxLength(200)]*/],
  });

  onSubmit(): void {
    if (this.form.invalid) {
      this.form.markAllAsTouched();
      return;
    }

    this.loading.set(true);
    
    const formValue = this.form.getRawValue();

    const payload = {
      name: formValue.transactionName,
      type: formValue.transactionType,
      amount: Number(formValue.transactionAmount),
      category: formValue.transactionCategory,
      completedAt: formValue.transactionDate,
      description: formValue.transactionDescription
    };

    this.transactionsService.createTransaction(payload).subscribe({
      next: (transaction) => {
        this.transactionCreated.emit(transaction);
        this.form.reset({
          transactionName: '',
          transactionType: 'income',
          transactionAmount: '',
          transactionCategory: '',
          transactionDate: '',
          transactionDescription: '',
        });
        this.loading.set(false);
      },
      error: (error) => {
        console.error('Error creating transaction: ', error);
        this.loading.set(false);
      }
    });
  }

  ngOnInit(): void {
    this.loadCategories();
  }

  loadCategories(): void {
    this.loading.set(true);

    this.categoriesService.getCategories().subscribe({
      next: (data) => {
        this.categories = data;
        this.loading.set(false);
      },
      error: (error) => {
        console.error('Error loading categories:', error);
        this.loading.set(false);
      },
    });
  }
}