Passing data between controllers?

Question

Angular

Good morning!
I started writing in Angular 5 and immediately ran into the problem of transferring data between unordered controllers. I looked on the net - there are answers ... but for some reason it does not work. I provide the code and I will be glad to advice. Thank you contagiously.
Here is the controller that contains the report list:

import { Component, OnInit } from '@angular/core';
import { Report } from '../models/report';
import { ReportsService } from './reports.service';
import { Message } from '@angular/compiler/src/i18n/i18n_ast';


@Component({
  selector: 'app-reports',
  templateUrl: './reports.component.html',
  styleUrls: ['./reports.component.css']
})
export class ReportsComponent implements OnInit {
  reports: Report[];
  selectedReport: Report;

  getReportData(reportId: number): void {
    this.reportService.getReport(reportId);
  }

  constructor(private reportService: ReportsService) { }

  ngOnInit() {
    this.getReportsList();
  }

}

Service

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';


import { Report } from '../models/report';
import { REPORTS } from '../reports-mock';

@Injectable({
  providedIn: 'root',
})
export class ReportsService {

  selectedReport: Observable<Report>;


  getReport(id: number): Observable<Report> {
    this.selectedReport =of (REPORTS.find(rep => rep.id === id));
    return this.selectedReport;
  }

  constructor() { }
}

and the "report" itself, which receives the variable

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';


import { Report } from '../models/report';
import { REPORTS } from '../reports-mock';

@Injectable({
  providedIn: 'root',
})
export class ReportsService {

  selectedReport: Observable<Report>;

  getReportsList(): Observable<Report[]> {
    return of(REPORTS);
  }

  getReport(id: number): Observable<Report> {
    this.selectedReport =of (REPORTS.find(rep => rep.id === id));
    return this.selectedReport;
  }

  constructor() { }
}

Answer 1

Try like this

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


import { Report } from '../models/report';
import { REPORTS } from '../reports-mock';

@Injectable({
  providedIn: 'root',
})
export class ReportsService {

  selectedReport: Report;


  getReport(id: number): Report {
    this.selectedReport = REPORTS.find(rep => rep.id === id);
    return this.selectedReport;
  }

  constructor() { }
}

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


import { Report } from '../models/report';
import { REPORTS } from '../reports-mock';

@Injectable({
  providedIn: 'root',
})
export class ReportsService {

  selectedReport: Report;

  getReportsList(): Report[] {
    return REPORTS;
  }

  getReport(id: number): Report {
    this.selectedReport = REPORTS.find(rep => rep.id === id);
    return this.selectedReport;
  }

  constructor() { }
}