How to pass data to any component irrespective of child-parent in angular?

Issue

I am trying to pass data to a component, but i am getting error.

Property 'doSomethingX' does not exist on type 'AppComponent'.ngtsc(2339)
app.component.ts(5, 12): Error occurs in the template of component AppComponent.

Here what i did.

What I want to achieve: I'm developing an app/website in which if the user does not log in, a popup should appear directing the user to the log-in screen. requireloginregister is a component where user will be directed to. Now I want to make this component active/visible if someone clicks on a feature that requires authentication.

What I did:

In a component, to add the item to wish list, user must login/register first. So when user click on the wish item button, first i am checking if user is logged in or not. If not logged-in i am sending signal to requireloginregister component to become visible.

  @Output() public eventName = new EventEmitter();
  this.eventName.emit(true); // "true" is signal

and on requireloginregister component i am receiving this signal as

<app-requireloginregister (eventName)="doSomethingX($event)" ></app-requireloginregister>

Inside requireloginregister component:

doSomethingX(e)
{
alert("Signal received" + e);
}

Where problem occurs:

The problem occurs when i add html template to app.component.html file

<app-abovenav></app-abovenav>
<app-nav></app-nav>
<router-outlet></router-outlet>
<app-footer></app-footer> 
<app-requireloginregister (eventName)="doSomethingX($event)" ></app-requireloginregister>

The reason I want to pass data without child/parent relationship is that, there are many components in my application which first check if user is not logged in, all of these components will have to pass a signal to requireloginregister component.

Any help is appreciated.

Solution

Finally my issue resolved. If anyone else having this communication type of issue, follow below steps. Credits Simplilearn

Step 01:

Create a service using

ng g service "your-service-name"

Step 02:

In your service.ts file get the instance of the component that you want to send signal to. In my case, component name was requireloginregister

import {RequireloginregisterComponent} from "../app/components/requireloginregister/requireloginregister.component";

Then I create an instance of RequireloginregisterComponent in my service class.

  r = new RequireloginregisterComponent();

Now I have the reference, I can call any public method defined inside RequireloginregisterComponent class.

Last Step:

Component from where you want to send the signal. Simply import your service inside your component. In my case, I called my service as "InvokerService" so

import { InvokerService } from './../../invoker.service';

Now define your service inside constructor as well

constructor( private invokerService:InvokerService) { } 

use invokerService variable to call method inside your service, which is linked to your other component, you want to pass signal to.

RequireloginregisterComponent

I want to send data/signal to this class/component

import { Component, OnInit   } from '@angular/core';
@Component({
  selector: 'app-requireloginregister',
  templateUrl: './requireloginregister.component.html',
  styleUrls: ['./requireloginregister.component.css']
})
export class RequireloginregisterComponent implements OnInit {
  
  constructor() { }

  ngOnInit(): void {
    
  }
  message(message:any)
  { 

  alert("Message Received: " + message;)
  
  }
  
 
}

My Service class

import { Injectable } from '@angular/core';
import {RequireloginregisterComponent} from "../app/components/requireloginregister/requireloginregister.component";
@Injectable({
  providedIn: 'root'
})
export class InvokerService {

  constructor() { }
  r = new RequireloginregisterComponent();
  
  messageTranspoter(msg:any){ 
    this.r.message(msg);
  }
}

I am sending data/signal from this component/class

import { InvokerService } from './../../invoker.service';
import { Component, OnInit  } from '@angular/core';
 
@Component({
  selector: 'app-productdetail',
  templateUrl: './productdetail.component.html',
  styleUrls: ['./productdetail.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class ProductdetailComponent implements OnInit {
  
  constructor(private invokerService:InvokerService) { } 
   
  sendMessage(){
  
       this.invokerService.requireAuth();

   }
}

Answered By - Saad Zahoor