how to show tooltip content which is in childComponent from parentComponent angular

Question

I have created one component which is parent:-

@Component({
    selector: 'parent',
    templateUrl: '../views/parent.view.html'
})
export class ParentComponent {
    @ViewChild('primaryColorSample')
    primaryColorSample: AssetNoteComponent;
}

Parent html :-

<div> <a [tooltip]="primaryColorSample">add</a>
    <child #primaryColorSample></child>
</div>
 

child component :-

@Component({
    selector: 'child',
    templateUrl: '../views/child.view.html'
})
export class childComponent {

}

Child HTML :-

<tooltip-content #primaryColorSample [animation]="true" placement="left">
  <input type="text" name="child" required="true" />
  <button>save</button>
</tooltip-content>

I'm not able to use tooltip content from parent html, would you please suggest me how to do this. I'm using ngx-tooltop and Angular.

Answer 1

From the doc and source code of ngx-tooltip, we can see the [tooltip] Input is of type string or TooltipContent component.

You could move the template of child, which is a TooltipContent, to the top of parent template, and remove <child #primaryColorSample></child>. It would work.

In your setup, you use ViewChild to get a reference to Child component, what you get in return is a reference to the child component class, not a string, not a TooltipContent component, so it didn't work.