[Angular] 비밀번호 찾기 화면 구현

ionic 차례

$ ionic g page auth/forget

src/app/auth/forget/forget.page.html

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label><ion-icon name="person"></ion-icon></ion-label>
      <ion-input placeholder="Username" [(ngModel)]="user" type="text"></ion-input>
    </ion-item>
    
    <div class="btn-center-align">
      <ion-button color="primary" shape="round" (click)="forget()">Submit</ion-button> <br>
    </div>
  </ion-list>
</ion-content>

src/app/auth/forget/forget.page.scss

ion-content {

}
ion-content > ion-list {
    position: relative;
    top:30%;
}
.btn-center-align {
    text-align: center !important;
}
.btn-center-align ion-button {
    --color: white
}
ion-item {
    --background: white;
    color: blue($color: #000000);
    --min-height: 40%;
}
ion-list {
    background-color: white;
}
:host {
    --min-height: 39px
}

src/app/auth/forget/forget.page.ts

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

@Component({
  selector: 'app-forget',
  templateUrl: './forget.page.html',
  styleUrls: ['./forget.page.scss'],
})
export class ForgetPage implements OnInit {

  user:String
  
  constructor() { }

  ngOnInit() {
  }

  forget() {
    console.log('forget password: ', this.user)
  }

}

 

Forget Password를 누릅니다.

 

ionic 차례