family add side

src/app/components/add-family/add-family.component.html

@@ -1,3 +1,50 @@
-<p>
-  add-family works!
-</p>
+<div>
+  <ion-button size="small" shape="round" (click)="addStart()">Add Family</ion-button>
+</div>
+
+
+<div *ngIf="isModalOpenBackdrop==true">
+  <ion-backdrop [visible]="isModalOpenBackdrop"></ion-backdrop>
+  <ion-modal class="common_modal" [isOpen]="isModalOpen">
+
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Add Family</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="setCloseModal()">Close</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-card-content>
+
+          <ion-item lines="none">
+            <ion-input type="text"  maxlength="15" placeholder="Firstname" [(ngModel)]='firstname' ></ion-input>
+          </ion-item>
+
+          <ion-item lines="none">
+            <ion-input type="text"  maxlength="15" placeholder="lastname" [(ngModel)]='lastname' ></ion-input>
+          </ion-item>
+
+          <ion-item lines="none">
+            <ion-input type="text"  maxlength="35" placeholder="Email" [(ngModel)]='email' ></ion-input>
+          </ion-item>
+
+          <ion-item lines="none">
+            <ion-input type="text"  maxlength="14" placeholder="Online Name" [(ngModel)]='online_name' ></ion-input>
+          </ion-item>
+          <div style="text-align: right;">
+            {{profileMessage}}
+            <ion-button shape="round" size="small" (click)="sendUpdateProfile()">Update</ion-button>
+          </div>
+        </ion-card-content>
+      </ion-content>
+      <ion-footer>
+        <ion-toolbar>
+          <ion-button  (click)="setCloseModal()">Close</ion-button>
+        </ion-toolbar>
+      </ion-footer>
+    </ng-template>
+  </ion-modal>
+</div>

src/app/components/add-family/add-family.component.scss

@@ -0,0 +1,22 @@
+.common_modal{
+  z-index: 9999;
+}
+ion-backdrop {
+  opacity: 0.9;
+  background: var(--ion-color-primary);
+}
+
+#box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ion-background-color, #fff);
+  width: 90%;
+  height: 100px;
+  border-radius: 10px;
+}

src/app/components/add-family/add-family.component.ts

@@ -6,9 +6,23 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./add-family.component.scss'],
 })
 export class AddFamilyComponent implements OnInit {
-
+  isModalOpen:boolean = false;
+  isModalOpenBackdrop:boolean = false;
   constructor() { }
 
   ngOnInit() {}
 
+  addStart(){
+    this.isModalOpen = true;
+    this.isModalOpenBackdrop= true;
+  }
+
+  setCloseModal(){
+    this.isModalOpen = false;
+    setTimeout(()=>{
+      this.isModalOpenBackdrop= false;
+      //this.myWallet();
+    },1000);
+  }
+
 }