Angular provides various ways for components to communicate with each other without relying on external libraries. Check out the official documentation

When dealing with sibling components rather than parent-child relationships, your options are limited.

1. Have a shared parent component pass data to both children.
2. Store the data in a shared service.

Based on the code you've shared, using option #2 seems like the most suitable solution. You can create a property in your CourseService:

public selectedCourse: ICourse;

Then, you can access this property in both components:

this.courseService.selectedCourse;

The drawback of this approach is that you'll need to manage a pseudo-global state and ensure that the service is only injected/provided once to prevent each component from having its own instance and hindering data sharing.

As suggested by Pavan in a comment on the question, consider using an Observable and subscribing to it. This way, the components will be notified of any changes in the value instead of having to manually check for updates upon loading.

If your URL contains an ID, you can use the following code snippet:

import { Component, OnInit} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MatSidenavModule } from '@angular/material/sidenav';

import { ICourse } from '../course';
import { CourseService } from '../course.service';

@Component({
    selector: 'lg-course-play-course-play',
    templateUrl: './course-play.component.html',
    styleUrls: ['./course-play.component.sass']
})

export class CoursePlayComponent implements OnInit {
    courseId: number;
    errorMessage: string;
    private sub: any;

    constructor(private courseService: CourseService,
        private route: ActivatedRoute,
        private router: Router) {

    }

    ngOnInit() {
        const id = +this.route.snapshot.paramMap.get('id');
        this.getCourse(id);
    }

    // Retrieve course details by ID
    getCourse(id: number) {
        this.courseService.getCourse(id).subscribe(
        course => this.course = course,
        error  => this.errorMessage = <any>error);
    }

    onBack(): void {
        this.router.navigate(['/courses/:id']);
    }

}

If you want to share data across multiple components, one approach is to use static attributes or methods. Here's an example:

header component:

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent {
   public static headerTitle: string = "hello world";
}

footer component:

import { HeaderComponent } from '../header/header.component';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent {
   public footerText: string = HeaderComponent.headerTitle;
}

While using static attributes/methods can reduce overhead compared to creating a service, it may not be suitable for complex logic. Complex scenarios could lead to circular dependency warnings and coupling issues, especially when components need data from each other. In such cases, using a service with rxjs' BehaviorSubject is recommended. Services should be self-reliant and avoid heavy reliance on other services or components to prevent circular dependency warnings.

    //Service Implementation
    export class DataService {
      data: BehaviorSubject<any>;
      constructor() {
        this.data = new BehaviorSubject(this.data);
      }
      loadData(selectedData: any): void {
        this.data.next(selectedData);
      }
    }

    //Component1 Implementation
    const info = {
          id: 7444,
          company: 'TechCo'
    };
    this.dataService.loadData(info);

    //Component2 - Subscribe to data
    this.dataService.data.subscribe(newData => {
         this.selectedData = newData;
    });

   // Component2 HTML Template
    <div class="pl-20 color-black font-18 ml-auto">
                    {{selectedData?.company}}  
         <span><b>{{selectedData?.id}}</b></span>
    </div>

One effective way to handle communication between unrelated components is by utilizing the Mediator Pattern.

The mediator pattern allows for encapsulation of communication within a mediator object, eliminating direct communication between objects.

I have come across the term "unrelated components" which refers to components that may or may not share a common parent.

If there is a common parent (siblings), then the parent component can act as a mediator. For instance, if we have the following hierarchy of components:

-Component A
--Component B
--Component C

and there is a need to pass data from Component B to Component C, the process involves passing data from Child to Parent (Component B to Component A) and then from Parent to Child (Component A to Component B).

In Component B, we can use Output binding with the @Output decorator to emit an event (EventEmitter), allowing Component A to receive the event payload. Component A can then invoke the event handler, enabling Component C to receive the data using the @Input decorator.

If there is no common parent, another approach would be to utilize a service. In this scenario, simply inject the service into the components and subscribe to its events.