Moving 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>

2. 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 class="otp-validate">Validate</button>
  </div>
</div>

Page -
test.page.html

<ion-content>

  <ion-button (click)="phoneEntryOpen()" style="z-index:1001">Phone Number Entry</ion-button>
  <app-verify-phone *ngIf="showPhoneEntry"></app-verify-phone>

</ion-content>

test.module.ts -

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { TestPageRoutingModule } from './test-routing.module';
import { TestPage } from './test.page';
import { PhoneComponentsModule } from '../../components/phone/phone-components.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TestPageRoutingModule,
    PhoneComponentsModule
  ],
  declarations: [TestPage]
})
export class TestPageModule {}

Calling the two components via “phone-components.module”(shared module, as I need to load in other pages also)

test.page.ts-

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss'],
})
export class TestPage implements OnInit {
  showPhoneEntry: boolean = false;
  phoneEntryOpen() {
    this.showPhoneEntry = true;
  }

  constructor( ) {}
  ngOnInit() {}
}

So basically I want to open verify-phone component when I click on ion-button in test page.
click on Cancel button to remove this.
In other hand, after entering the phone click on Send OTP to open verify-otp component and remove verify-phone component.
After successful otp entry click validate button to remove this and do somthing.

what should I do?

Thanks in advance.

2 posts - 2 participants

Read full topic