Get instance of my component


I,m back, furthermore new to ionic and web stuff and will learn more.

An exsample shows how to get the instance from html with # and bring it into .ts File.

      <ion-select [(ngModel)]="toppings" multiple="true" #tops>
        <ion-option>Black Olives</ion-option>
        <ion-option>Extra Cheese</ion-option>
    <button ion-button (click)="openIt(tops)">Open</button>

and in .ts

openIt(tops) {;

Works like descripted, also with my components. Fine.

My questions are:
a) If I add my component to html without #example , how I get the instance of my component from a .ts file?

b) How I add ‘#example’ to a component, that is created by code?

c) If a) isn’t working, how I add ‘#exsample’ to existing instance of my component?

d) What is the best way to access an instance of my component from any place.

Thanks in advance, anna-liebt.


In general, I consider this a red flag for a design mistake, because it is breaking encapsulation. All interaction with embedded components should be done using input and output property binding instead - that way the interface is clearly delineated, which facilitates readability, maintenance, and testing.


Thanks for the hint,
I’m really new to all this things. This hint means also the use of @viewchild, @viewcontent and so on?

Thanks in advance.


I would also use those as sparingly as possible.


Thanks rapropos for your helpfull advices.

Best regards, anna-liebt