It seems like you are trying to pass a message from your msg component to your filter component, is that correct?
If so, here is what you need to do:
- Retrieve the data from your msg component in your main component using an @Output().
- Pass the received data from the main component to your filter component using an @Input().
Step 1
In your msg.component.ts :
export class MsgComponent {
@Output() messageEmitter: EventEmitter<string> = new EventEmitter<string>();
public emitMessage(message: string): void {
this.messageEmitter.emit(message);
}
}
Here, you create an EventEmitter that will be triggered by the method emitMessage() when you want it to be passed to the main component.
In your main.component.ts :
export MainComponent {
public message: string = '';
public getMessage(message: string): void {
this.message = message;
}
}
You create a method in your main component to retrieve the value of the @Output().
In your main.component.html :
<app-msg (messageEmitter)="getMessage($event)"></app-msg>
You use the method defined in your main component to retrieve the message when the @Output() is triggered in the child component.
Step 2
In filter.component.ts :
export class FilterComponent {
@Input() message: string;
}
You create an @Input() that will receive the data sent by the parent (the main component).
In main.component.html :
<app-filter [message]="message"></app-filter>
You pass the message from the main component (after the '=' sign) to the child component's attribute message (inside brackets).