How do I transfer data between a shared class and an angular 2 component?

sharing data between components angular 8
angular 7 communication between sibling components
how to pass data from one component to another in angular 8
how to pass data from one component to another in angular 7
sharing data between components angular 4
how to pass data from one component to another in angular 6
angular2 share data between components using service
share array between components angular

I am making calls to my back-end service using an independent TypeScript class. I am able to console.log the captured data when instantiating the instance of my shared class. However, I am having trouble accessing the local properties and methods of that class inside my angular component.

Here is my component:

import { Component, OnInit } from '@angular/core';
import { ProjectService } from '../shared/projectService';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})

export class AboutComponent implements OnInit {

  projects: any;
  windowWidth: number;
  service: ProjectService;

  constructor(private httpClient: HttpClient) { 
    this.service = new ProjectService(this.httpClient);
    //  returns as undefined
    console.log(this.service.getAllProjects());   
  }

  ngOnInit() {
    this.windowWidth = window.innerWidth;
  }

}

Here is my shared class module:

import { HttpClient } from '@angular/common/http';

interface Project {
    demoURL: string,
    githubURL: string,
    imgFileName: string,
    name: string,
    stack: Array<string>
}

export class ProjectService {

    private configURL = `https://someURL.herokuapp.com/getAllProjects`;
    projects: any;
    constructor(private httpClient: HttpClient) {

        this.httpClient.get(this.configURL).subscribe(resp => {
            this.projects = resp;
        });
    }

    getAllProjects() {
        return this.projects;
    }
}

As you can see,

I want to populate my local variable projects inside my ng component using this.service.getAllProjects(). When I try to log the response from my shared class ProjectService the function response is undefined.

When I console.log inside ProjectService constructor after I initialize the class using new I can see that my class was able to capture the response.

Why is it doing this? Also, how do I fix it?

Thanks guys.

As pointed by user1986938, your problem is that your API call is asynchronous and you have to wait for the API response to be able to do something with your data. In Angular, you can easily do that relying on RxJs library with which Angular is tightly coupled.

Here is a working example that you can easily adapt to your case.

You can see that in this example I use a ReplaySubject because it is able to provide value again to any new subscriber, even after your API call is completed. Concretely, this allow you to query the list of all your projects from your ProjectService multiple times and possibly from different parts of your app, without having to do the real API call more than once and without having to care about anything else.

If your not familiar with ReactiveX concepts, I suggest you read this great documentation, and for your case, this part which is about Subjects.

component
export class AppComponent
{
    // this property allows passing projects to your template
    projects: string[];

    // you can directly inject your service into your component constructor
    constructor ( private projectService: ProjectService )
    {
        // here you subscribe to you projects query observable
        this.projectService.getAll().subscribe(projects =>
        {
            // now you can do what you want with your projects
            console.log('projects: ', projects);
            // here, we store projects in component property to display them in template
            this.projects = projects;
        });
    }
}
service
export class ProjectService
{
    // this property is used to store your API response
    private projectsSubject: ReplaySubject<any>;

    constructor ()
    {
        // create subject
        this.projectsSubject = new ReplaySubject();

        // do API call
        this.doFakeAPICall().subscribe(projects =>
        {
            // store response as subject value
            this.projectsSubject.next(projects);
        });
    }

    getAll (): Observable<any>
    {
        // return subject as observable
        return this.projectsSubject.asObservable();
    }

    // replace this be your real API call
    private doFakeAPICall (): Observable<any>
    {
        // here we simulate a response delay of one second
        return of([ 'project 1', 'project 2' ]).pipe(delay(1000));
    }
}

Sharing Data between Angular Components, Sharing Data between Angular Components - Four Methods parent.component​.css'] }) export class ParentComponent{ parentMessage import { Component, ViewChild, AfterViewInit } from '@angular/core'; import  In Angular 1.x.x you simply ask for the same service and you end up with the same instance, making it possible to share the data in the service. Now in Angular 2 I have a component that has a reference to my service. I can read and modify the data in the service, which is good.

You are not waiting for response to complete when instantiating ProjectService object. Projects property is not set yet. I would suggest you use behaviorSubject for projects property. You can read about subjects and behaviorSubject here.

Sharing Data between Angular Components, Angular components are the building blocks of any Angular application. Components provide Parent to Child: Sharing Data using @Input decorator 2​. 3. <button class="btn btn-primary mt-4" (click)="updateParent()">. Well, the answer is we are using the @Input and @output for sharing the data between parent and child. Suppose we have the requirement to share the data between components where each component is separate. This time, the Angular service comes into the picture.

Okay, so what worked for me was using EventEmitter to emit the projects when the http request completed, as mentioned by user1986938.

This is what I did:

HttpService:

import { HttpClient } from '@angular/common/http';
import { Injectable, EventEmitter } from '@angular/core';
import { Project } from '../shared/project.interface';

@Injectable()
export class ProjectService {

    private configURL = `https://someURL.herokuapp.com/getAllProjects`;
    public httpResponse = new EventEmitter<Project[]>();
    public projects: Project[];

    constructor(private httpClient: HttpClient) {
        this.httpClient.get(this.configURL).subscribe((res: Project[]) => {
            this.projects = res;
            this.httpResponse.emit(this.getProjects());
        });
    }

    getProjects() {
        return this.projects.slice();
    }
}

Component:

import { Component, OnInit } from '@angular/core';
import { ProjectService } from '../shared/project.service';
import { Project } from '../shared/project.interface';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css'],
  providers: [ProjectService]
})

export class AboutComponent implements OnInit {

  projects: Project[];
  windowWidth: number;

  constructor(private projectService: ProjectService) { 
  }

  ngOnInit() {
    this.windowWidth = window.innerWidth;

    this.projectService.httpResponse.subscribe(([first, second]: [Project, Project]) => {
        console.log(first);
        console.log(second);
    });
  }

}

Methods to Share Data Between Angular Components, Data Sharing Between Angular Components export class Teacher { name: string; subject:string; } export const Teachers = [ {name: 'Mr. Deep',subject:'​Angular 6 import { Component,Input, OnInit } from '@angular/core'; import { Teacher } from '. Method 2: Child to Parent via @Output and EventEmitter. In Angular, we can use any component inside another component. Here, the component, which is used inside other component is called child component and the main component is called parent component. Let’s say for example, I am creating two components, which are given below.

Angular Services For Sharing Data Between Components, My previous article about Sharing Data Between Component Using Angular V4 And Above in import { Injectable } from '@angular/core';; @Injectable(); export class DataService Step 2 - execute the command ng serve. All you need to do is put a single providers: [myService] line in some component that is above the two components that need to share the data. That way, they'll both get the same/single instance. That way, they'll both get the same/single instance.

Sharing modules, Get Data from a Server Creating shared modules allows you to organize and streamline your code. You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other It declares and exports the utility pipe, directive, and component classes. I have an Angular application with 3 sibling components, they are able to access and update the variable "data". Component 1 has an object called data and Components 2 and 3 need to receive this data object. I think this can be done with a shared service, but I'm not quite sure how to get this event emitter to work..

Component interaction, Pass data from parent to child with input bindinglink content_copy import { Component } from '@angular/core'; import { HEROES } from './hero'; @​Component({  Angular components are the building blocks of any Angular application. Components provide the views or templates for your application, as well as, manage the data bound to those views. Some of most common data sharing scenario is in which two or more components share information are: Parent Component => Child Component : @Input — property binding.