목록modal (6)

깜놀하는 해므찌로

angular modal dismiss 예시

delete() { const items = localStorage.getItem('orderInfos'); let orderInfos: OrderInfo[] = []; if (items) { orderInfos = JSON.parse(items); const index = orderInfos.findIndex( (orderInfo: OrderInfo) => orderInfo.id === this.orderInfo.id ); orderInfos.slice(index, 1); localStorage.setItem('orderInfos', JSON.stringify(orderInfos)); } this.modalController.dismiss(null, 'confirm'); } 1. dismiss 할 시 ..
IT 2023. 6. 18. 16:12
Ionic modal pass data to component 사용 예시 Angular

closeModal(){ this.modalController.dismiss({ dismissed: true, data: 'ㅋㅋ', }); } 1. 모달 컴포넌트 : 모달 종료 시 데이터 ''ㅋㅋ" 를 전달해보겠습니다. 2. data : 라는 변수명은 데이터를 받을 컴포넌트의 변수명과 일치해야 합니다. async openModal() { // modal 생성 시점 const modal = await this.modalController.create({ component: UpdateAdminModal, componentProps: { admin: this.admin, }, }); modal.onDidDismiss().then((res: any) => { // modal 닫히는 시점 console.log(..
IT 2023. 6. 12. 00:42
Hybrid Angular + Ionic modal 아이오닉 생성 예시 CLI

ionic generate page modal 1. CLI page 생성 import { Component, OnInit, Input } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { IonicModule } from '@ionic/angular'; import { ModalController } from '@ionic/angular'; @Component({ selector: 'app-modal', templateUrl: './modal.page.html', styleUrls: ['./modal.page.scss'], stand..
IT 2023. 5. 5. 12:37
Angular modal data pass 예시

async deleteBranch() { const modal = await this.modalController.create({ component: DeleteBranchModal, componentProps: { item: this.branch, }, }); await modal.present(); modal.onDidDismiss().then((res) => { if (res.role === 'submit') { this.router.navigateByUrl( this.router.routerState.snapshot.url.split('/')[1] ); } }); } 1. 모달 생성과 닫힌 후 로직 2. item : 통신 키 값 import { Component, OnInit, Input } fr..
IT 2023. 4. 29. 16:01
Ionic modal resize 예시

ion-modal { --border-radius: 0.5rem; --width: 30rem; --height: 27rem; } ion-modal { --border-radius: 8px; --max-height: max-content; --max-width: max-content; --height: max-content; --width: max-content; --backdrop-opacity: 0.6; --padding: 8px; --overflow: visible; .modal-wrapper { height: auto; } .ion-page { max-height: max-content; } } ion-modal + ion-modal { --backdrop-opacity: 0.6 !important..
IT 2023. 4. 21. 00:14
Ionic & component 데이터 이동 예시 on Angular

import { Component } from '@angular/core'; import { ModalController } from '@ionic/angular'; import { ModalPage } from '../modal/modal.page'; @Component({ selector: 'modal-example', templateUrl: 'modal-example.html', styleUrls: ['./modal-example.css'] }) export class ModalExample { constructor(public modalController: ModalController) { } async presentModal() { // 모달 열기 메소드 const modal = await th..
IT 2023. 4. 15. 23:26
이전 Prev 1 Next 다음