Angular - Przycisk przekierowujący na stronę z "zestawem danych"

Witajcie.

Mam poniższy problem, stworzyłem sobie tabelkę z danymi(które pobierane są z API i poprzez ngFor dodawane do tabeli), oraz stworzyłem dodatkową kolumnę z przyciskiem "More info". Chciałbym aby po kliknięciu tego przycisku zostanę przeniesiony na stronę gdzie będzie podanych dużo więcej danych niż w tabeli. Głównie nie wiem jak się mogę odnieść do konkretnego rekordu i potem go przekazać do nowej strony w raz z danymi. Nie bardzo też mogę nic znaleźć sensowego w sieci. Jeśli macie jakiś fajny artykuł to poproszę o komentarz :).

Poniżej prosty kod jak mniej więcej wygląda moja apka(nie dodawałem tu pobierania danych z api):

https://stackblitz.com/edit/angular-yrxcr7

Tutaj moim zdaniem można użyć routerLink na buttonie w tabeli wraz z przekazaniem odpowiednich parametrów (np id wiersza), na podstawie id ściągasz dany rekord i więcej informacji o nim. W końcu musisz przekierować użytkownika na inną stronę, czyli inny route apki.
Wydaje mi się, że oficjalna dokumentacja jest OK - https://angular.io/guide/router

Co innego, jeśli chcesz zrobić to w ramach jednego widoku.

Już mówię o co dokładnie mi chodzi:

Mam taką tabelkę wygenerowaną z tablicy. Teraz chcąc kliknąć na przykład na przycisk w wierszu o "Budget August 2019" nie wiem jak mogę pobrać id z tej konkretniej linijki.

Zazwyczaj rekordy które wyświetlasz mają swój identyfikator.
Wtedy piszesz np:

<button (click)="onClick(budget.id)" >More info</button>

w obsłudze przycisku:

constructor(  private router: Router ) { }

onClick( id: number ) {
    this.router.navigate(['details', id]);
}

w routingu:

{ path: 'details/:id',  component: DetailsComponent },

w komponencie DetailsComponent:

ngOnInit() {
    this.route.params.subscribe(params => {
        this.budget_id = +params['id'];
    }
}

Edit: a jak nie chcesz robić routingu to wystarczy np tak:

<button (click)="onClick(budget)" >More info</button>

onClick( budget: Budget ) {
    alert( JSON.stringify(budget) )
    // albo this.selectedBudget = budget i w widoku wypisujesz szczegóły np. {{selectedBudget.name}} itd
}

Skorzystaj z routerLink, jak ktos wyżej napisał. Np.

[routerLink]=['bugdet', id]

a potem rejestrujesz takiego route'a i w komponencie wyciagasz id, dalej na jego podstawie zaciągasz więcej szczegółów

Po rozwiązaniu tego problemu pojawił się nowy :D, zrobiłem metodę get w API C# oraz zadeklarowałem ją w http.service w Angularze:

getBudgeted(bid: number, month: number): any {
        let params1 = new HttpParams();
        this.Pbid = bid.toString();
        this.Pmonth = month.toString();
        params1 = params1.append('bid', this.Pbid);
        params1 = params1.append('month', this.Pmonth);
        return this.http.get('https://localhost:44353/api/budgets', {params: params1});
    }

Ale podczas wywoływania krzyczy:

Kod z komponentu:

onClick( budget: Budget ) {
      this.bid = budget.Budget_id;
      this.month = budget.Month;
      this.httpService.getBudgeted(this.bid, this.month).subscribe(
      bud => {
        console.log(this.budgeted = bud);
      }
    );
      alert( JSON.stringify(budget, null, 4) + this.budgeted);

}

Co robię nie tak? Dodam że jak na sztywno ustawie liczby np 1 i 8 to zwaca mi to czego oczekuje.

Zrób choćby console.log na obiekcie budget w metodzie onClick(). Zapewne błąd w nazwie pola i nie ma tam czegoś takiego jak Budget_id