Pass Array Between Child Components Angular/TypeScript

Question

I am trying to pass an array from one child component to another. I have tried following some of the tutorials online to share data with a service, but this doesn't seem to be working for me and causes my page not to load anything.

What was breaking my program was adding the DataService to the constructor:

import { DataService } from '../data.service';

export class BodyComponent implements OnInit{
  films = [{Title: "Finding Nemo", Rating: "3.5"}, {Title: "Rambo", Rating: "4.0"}];
  constructor(private http: HttpClient, private data: DataService) { }
}

data.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private finalNoms = new BehaviorSubject<any>([]);
  currentNoms = this.finalNoms.asObservable();

  constructor() { }

  changeNominations(nom: Object){
    this.finalNoms.next(nom);
  }

}

Can you indicate how the app was broken when dataService was added (what error message and/or behavior) ? How are you using this dataService in the BodyComponent ? — Vincent AUDIBERT
– Vincent AUDIBERT, Commented Dec 23, 2020 at 20:00
so basically nothing would load on the screen, and if I inspect the page, the <app-header> and <app-body> sections appear, but there is nothing inside of them. I am also missing my <app-footer> — Derek S
– Derek S, Commented Dec 23, 2020 at 20:54
the use of the dataService will be to add movies to a list, or remove from the list. — Derek S
– Derek S, Commented Dec 23, 2020 at 21:03

Paul Serre · Accepted Answer · 2020-12-23 19:00:09Z

1

In angular it's the service who manages the data. You should put films = [{Title: "Finding Nemo", Rating: "3.5"}, {Title: "Rambo", Rating: "4.0"}]; in your service and access to it in your component by doing in the constructor or ngOnInit:

this.films = this.data.films;

Other thing: you should name (in your component) your service dataService instead of justdata.

edited Dec 23, 2020 at 19:00

answered Dec 23, 2020 at 18:49

Paul Serre

8005 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christian · Accepted Answer · 2020-12-23 20:21:35Z

1

It looks like you forgot to add where your service is provided:

@Injectable({
  providedIn: 'root',
})

That should fix your errors.

answered Dec 23, 2020 at 20:21

Christian

22.4k11 gold badges84 silver badges107 bronze badges

1 Comment

Derek S Over a year ago

this solved the issue with things not loading, thank you!

Rick · Accepted Answer · 2020-12-23 19:15:29Z

0

if you are trying to pass an array of data between 2 child components, it's probably best to create 2 ViewChilds in your parent and pass the data up to the parent via EventEmitter and back down to the other child.

answered Dec 23, 2020 at 19:15

Rick

1,88213 silver badges21 bronze badges

Collectives™ on Stack Overflow

Pass Array Between Child Components Angular/TypeScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related