Add show and hide whether checkbox is active or not

src/app/pages/chat/new-group/new-group.page.html

@@ -19,12 +19,12 @@
     <div class="item-container">
       <ion-input placeholder="Título"></ion-input>
     </div>
-    <ion-item class="ion-no-padding item-container-no-border" lines="none">
-      <ion-checkbox color="primary"></ion-checkbox>
+    <div class="item-container-no-border">
+      <ion-checkbox (ionChange)="_ionChange($event)" color="primary"></ion-checkbox>
       <ion-label>Grupo Ultra-secreto</ion-label>
-    </ion-item>
+    </div>
 
-    <div class="container-div">
+    <div *ngIf="showDuration" class="container-div">
       <div class="ion-item-class-2">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-duration.svg"></ion-icon>

src/app/pages/chat/new-group/new-group.page.scss

@@ -107,21 +107,19 @@ ion-content{
         border-radius: 5px;
         padding-left: 10px;
       }
+
       .item-container-no-border{
+        display: flex;
         width: 360px;
-        margin: 15px auto;
+        margin: 25px auto;
         border-radius: 5px;
-        padding-left: 10px;
-      }
-      .item-container-no-border ion-checkbox{
-          margin-top: 10px;
+        align-items: center;
       }
 
       .item-container-no-border ion-label{
           padding-left: 10px;
           font-size: 12px;
           color: #000;
-          margin-top: 0 !important;
       }
   }
 

src/app/pages/chat/new-group/new-group.page.ts

@@ -9,6 +9,7 @@ import { ContactsPage } from './contacts/contacts.page';
 })
 export class NewGroupPage implements OnInit {
   showLoader: boolean;
+  showDuration: boolean;
 
   constructor(
     private modalController: ModalController, 
@@ -18,6 +19,9 @@ export class NewGroupPage implements OnInit {
 
   ngOnInit() {
 
+  }
+  _ionChange(event){
+    this.showDuration = event.detail.checked;
   }
   close(){
     this.modalController.dismiss();