Communicating between two components in a page - Ionic Angular components

Hi All, Need your help to solve this for my Project

Project has

Two components -

  1. verify-phone.component.html
<ng-content></ng-content>
<div class="phone-module">
  <div class=" phone-header">Verify your phone number</div>
  <div class="phone-body">
    <div class="number-input">
      <input type="number"  class="phone-number" required="" value="">
    </div>
  </div>
  <div class="phone-footer">
    <button class="phone-cancel">Cancel</button>
    <button class="phone-submit"> Send OTP</button>
  </div>
</div>
  1. verify-otp.component.html
<ng-content></ng-content>
<div class="otp-module">
  <div class="otp-header">Enter Verification Code</div>
  <div class="otp-body">
    <div class="otp-txt text-center">A 4-digit OTP was to <b>XXXXXXXXXX</span></b>
    <div class="flex otp-input">
      <input type="number" class="otp-number" required="" value="">
    </div>
  </div>
  <div class="otp-footer">
    <button>Change Phone Number</button>
    <button class="otp-validate">Validate</button>
  </div>
</div>

Page -
test.page.html

<ion-content>

  <ion-button (click)="phoneEntryOpen()">Verify Your Phone</ion-button>

</ion-content>

In test page there is an ion-button, on click the button, verify-phone.component should appear where phone number will be entered. On click Send OTP button, verify-otp.component will be appeared and verify-phone.component will be disappeared.

When verify-otp.component is in sight, if user clicks on Change Phone Number button, verify-phone.component will appear.
Otherwise Clicking on Validate button, verify-otp.component should disappear.

Hope you can help me with this.
I’m noob in ionic and angular. But learning fast.

Thanks in advance.

Maybe this is just me, but I’ve read this entire post ten times and still have virtually zero idea what it’s asking.

The headline speaks of “moving between two components”. Either that’s a transitive “moving”, — in which case what are you trying to move? – or an intransitive one, but in that case, what does it mean to “move” when you’re not changing pages?

The best questions generally include a clear description of:

  1. the behavior you want
  2. the behavior you have
  3. the code that produces #2
  4. a focus on the difference between #1 and #2 that is concerning you

You have presumably discovered that you can make parts of your template “appear” and “disappear” by using structural directives like *ngIf, and you’ve got a boolean in your page that gets toggled by a function that is wired to a button click. All of that looks like a very reasonable way to make components at least appear to “open” and “remove”.

So my question is: can you please describe what is irreparably different between what you have and what you want?

@rapropos when I read the my topic, I laughed for while. What I have written!!
I edited the post. Sorry for this.

You need a service using observables. @rapropos has a classic post on this I am sure he can share easily

If u are new to this and a fast learner then I suggest you complete the Tour of Hero example on angular.io before doing anything else

I suspect @Tommertom is referring to this post, but I’m actually not sure it’s appropriate here (but that’s probably because I still don’t really have a good grip on what the question is in this thread).

So I’ll fall back on some opinionated generalities, which is my stock in trade.

#1: If you aren’t certain why something is there, get rid of it. So absent some compelling reason to the contrary, good-bye <ng-content>. I can’t think of any reason it would be helpful in this situation.

#2: If something can’t stand on its own, and especially if it’s only used in one place, it shouldn’t be an independent component. So, in the final analysis, I’m not yet convinced that these two components should even exist, and if they don’t, perhaps whatever the problem is here will magically go away.

My first instinct would be to just write this as a single reactive form, with parts of the template either washed out to indicate “can’t interact with me at the moment” or selectively removed from the DOM entirely with *ngIf. I’m not seeing much potential value in overengineering this into a bunch of microcomponents.