In my Angular app, I’m using a service to share a list of items between two components:

• A component dedicated to managing a page

• A component included in this page that serves to encapsulate the items and the associated input

In the input component, it’s ok : the list of items is correctly manipulated.
However, when I look at the list of items before sending it to the backend in the page component, it turns out to be empty.
I tried several methods (public accessor, getter-setter, reassigning the list in the page component’s properties), but nothing works.
I may be overlooking something.

The relevant code snippets. Do everything seem ok ?:

@Injectable()
export class DataService {

  private listeSelectedNames: NomGenerique[] = [];

  getListeSelectedNames() : NomGenerique[]{
    return this.listeSelectedNames 
  }
}

@Component({
  selector: 'left-menu',
  templateUrl: './left-menu.component.html',
})
export class LeftMenuComponent implements OnInit {
  listeSelectedNames = this.dataService.getListeSelectedNames()

  launchSearch() {
    // This log display an empty list
    console.log(' Liste Names : ' , this.listeSelectedNames);
    this.listeSelectedNames.forEach(item => {
       if (!criteres.listeNom!.some(existingItem => existingItem.codeNom == item.codeNom)) {
        criteres.listeNom!.push(item);
       }
    });
  }
}

@Component({
  selector: 'jhi-select-nom',
  templateUrl: './select-nom.component.html',
  styleUrls: ['./select-nom.component.scss'],
  viewProviders:[{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class SelectNomComponent {
  listeSelectedNames = this.dataService.getListeSelectedNames()

  // on the rest of the code, I access the list whit this.listeSelectedNames in order to push or remove items 

}

// HTML template
<div *ngFor="let item of listeSelectedNames; let i = index">
  <label class="form-label">{{ item.nomValide }} </label>
</div>