How to transfer the value of an array between components SAC [Angular 15] - angular15

Question

I'm looking to transfer the value of an array between two components. My application is a basic crud application that will store accounts with an id, name and date.
I have a service that has 2 basic functions and an array to pull from -
The array is holding the accounts. It is acting as my database for right now.
account-crud.service.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http'
import { Account } from '../models/Account';
import { AddAccountComponent } from '../dashboard/add-account/add-account.component';
#Injectable({
providedIn: 'root'
})
export class AccountCrudService {
private accounts:Account[] = [];
addAccount(account: Account){
this.accounts.push(account);
};
getAccounts(): Account[] {
console.log(this.getAccounts)
return this.accounts;
}
}
This service is used by 2 components. The desired behavior is for me to use the AddAccountComponent to add components, which will then push to the array in our service and then display all the accounts in the AllAccountsComponent.
Here is the add account component -
add-account.component.ts
#Component({
selector: 'app-add-account',
standalone: true,
imports: [FormsModule, ReactiveFormsModule, JsonPipe, RouterModule],
providers: [AccountCrudService],
templateUrl: './add-account.component.html',
styleUrls: ['./add-account.component.scss']
})
export class AddAccountComponent {
constructor(titleService:Title, private AccountCrudService: AccountCrudService) {
titleService.setTitle("Add Account")
}
public printAccounts() {
console.log('accounts :');
console.log(this.AccountCrudService.getAccounts());
}
private account:Account = {id: 0, name:'', date:''};
public get Account():Account{
return this.account;
}
public addAccount(){
const currentAccount:Account = {
id: this.account.id,
name: this.account.name,
date: this.account.date
};
this.AccountCrudService.addAccount(currentAccount);
}
And here is the HTML for the add account component -
add-account.component.html
<form #addAccountForm="ngForm">
<label for="name">Account Name</label>
<input name="accountName" type="text" [(ngModel)]="Account.name">
<br>
<label for="date">Initial Email Date</label>
<input name="date" [(ngModel)]="Account.date">
<br>
<button type="submit" (click)="addAccount()">Submit</button>
<button type="button" (click)="printAccounts()">console log accts</button>
<button type="button" routerLink="/dashboard">back</button>
<!-- this is for debugging purposes -->
{{ addAccountForm.value | json }}
</form>
And this component is where I plan to display all the accounts from that array. The line that I suspect is not working is the
this.accounts = this.AccountCrudService.getAccounts();
line in the getAllAccounts() function. -
all-accounts.component.ts
#Component({
selector: 'app-all-accounts',
templateUrl: './all-accounts.component.html',
styleUrls: ['./all-accounts.component.scss'],
imports: [AccountCardComponent, RouterModule, CommonModule, AddAccountComponent, FormsModule],
providers: [AccountCrudService],
standalone: true
})
export class AllAccountsComponent {
accounts: Account[];
constructor(titleService:Title, public AccountCrudService: AccountCrudService) {
titleService.setTitle("Dashboard")
this.getAllAccounts();
}
//this is a debugging function
public printAccounts(){
console.log('accounts :');
console.log(this.AccountCrudService.getAccounts());
}
public getAllAccounts() {
//I want the value of accounts to be equal to the value of getAccounts()
this.accounts = this.AccountCrudService.getAccounts();
return this.accounts;
}
}
all-accounts.component.html
<div class="all-accounts-header">
<h1>All Accounts</h1>
<div class="all-accounts-options">
<button class="all-accounts-addBtn" routerLink="/add-account">Add</button>
</div>
</div>
<br>
<div class="all-accounts-cards">
<app-account-card [accounts]='accounts'></app-account-card>
</div>
I send this array to the account-card component where it uses an ngFor to display all the accounts. This functionality works when given a full array of accounts manually.
from account-card.component
<div *ngFor="let account of accounts" class="account-card-container">
<div class="account-card-name">
<div class="account-card-header">
<h2>{{ account.name }}</h2>
<div class="account-card-date">
<p></p>
</div>
</div>
</div>
And here is the .ts file.
account-card.component.ts
#Component({
selector: 'app-account-card',
templateUrl: './account-card.component.html',
styleUrls: ['./account-card.component.scss'],
imports: [AllAccountsComponent, CommonModule],
providers: [AccountCrudService],
standalone: true
})
export class AccountCardComponent {
#Input() accounts: any[];
}
When I console log the array in the add-account component, it displays my array just fine. But once I do it anywhere else, the whole array is gone.
I have used #Input() to try and input the array directly from the service, but that didn't work.
Any help is appreciated. Thanks!