Get instance of my component

#1

Hello,
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-card>
  <ion-card-content>
    <ion-item>
      <ion-label>Toppings</ion-label>
      <ion-select [(ngModel)]="toppings" multiple="true" #tops>
        <ion-option>Bacon</ion-option>
        <ion-option>Black Olives</ion-option>
        <ion-option>Extra Cheese</ion-option>
      </ion-select>
    </ion-item>
    <button ion-button (click)="openIt(tops)">Open</button>
  </ion-card-content>
</ion-card>

and in .ts

openIt(tops) {
  tops.open();
}

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.

#2

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.

#3

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.

#4

I would also use those as sparingly as possible.

#5

Thanks rapropos for your helpfull advices.

Best regards, anna-liebt