How to get a reference to another component

I have componentA which shows "hello world". I want to open it in componentB via a function using the id of componentA.

Let's see the code:

ComponentB.html:

<app-A  id="content"></app-A><button (click)="open(content)">Open A</button> <!-- Error: Property 'content' does not exist  -->

ComponentB.ts:

open(content: TemplateRef<any>) {        //call a service }

The error I get is:Property 'content' does not exist on type componentB

I don't want to use normal parent-child solutions to open componentA, I need to open it via the function, is it possible?