@ -1,3 +1,6 @@
<!--
< ion-header >
< ion-toolbar class = "header-toolbar" >
< ion-buttons slot = "start" >
@ -5,388 +8,301 @@
< / ion-buttons >
< ion-title color = "light" > {{ts.trPK('payslip','title')}}< / ion-title >
< / ion-toolbar >
< / ion-header >
< / ion-header > -->
< ion-content class = "colorBG" >
< ion-item style = "margin: 10px;border-radius: 5px;" >
< ion-label > choose payslip< / ion-label >
< ion-select ( ionChange ) = " showInfo ( $ event ) " okText = "{{ts.trPK('general','ok')}}" cancelText = "{{ts.trPK('general','cancel')}}" [ ( ngModel ) ] = " choosePayslip " >
< ion-select-option value = "{{i}}" selected = "{{(i==0).toString()}}" * ngFor = "let options of GetPayslipList; let i=index" > {{options.PAYSLIP_CHOICE}} < / ion-select-option >
< / ion-select >
< / ion-item >
< div class = "header-div" >
< ion-buttons slot = "start" >
< ion-back-button color = "light" class = "btnBack" defaultHref = "/home" > < / ion-back-button >
< / ion-buttons >
< p class = "Title" > {{ts.trPK('payslip','monthly-payslip')}}< / p >
< div class = "Imgdiv" >
< img class = "Imgsrc" >
< / div >
< / div >
<!-- <ion - img class="profileImg" [src]="imageSrc"></ion - img> -->
<!-- <ion - list *ngIf="showPaySlip !=''" >
< ion-item >
< ion-row > < ion-label > PERIOD NAME< / ion-label > < ion-label > {{showPaySlip.PERIOD_NAME}}< / ion-label > < / ion-row >
< ion-row > < ion-label > PERIOD START DATE< / ion-label > < ion-label > {{showPaySlip.PERIOD_START_DATE}}< / ion-label > < / ion-row >
< ion-row > < ion-label > PERIOD END DATE< / ion-label > < ion-label > {{showPaySlip.PERIOD_END_DATE}}< / ion-label > < / ion-row >
< / ion-item >
< / ion-list > -->
< div * ngIf = "showPaySlip !=''" >
< accordin-custom >
< accordin-tab-custom [ header ] = " ' payslip , payroll-info ' | translate " >
<!-- special results -->
<!-- <ion - card >
< ion-card-header class = "boxHdr" >
< div class = "hrTitle" > {{ts.trPK('payslip','payroll-info')}} < / div >
< / ion-card-header >
< ion-card-content > -->
< div * ngIf = "showPaySlip !=''" >
< ion-grid class = "" >
< ion-row class = "" >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','peroid-name')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{showPaySlip.PERIOD_NAME}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','start-date')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{showPaySlip.PERIOD_START_DATE}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','end-date')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{showPaySlip.PERIOD_END_DATE}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
< empty-data * ngIf = "showPaySlip.length <= 0 " > < / empty-data >
<!-- </ion - card - content>
< / ion-card > -->
< / accordin-tab-custom >
< / accordin-custom >
<!-- <ion - card *ngIf="showPaySlip !=''">
< ion-card-header class = "boxHdr" >
< div class = "hrTitle" > {{ts.trPK('payslip','payroll-info')}} < / div >
< / ion-card-header >
< ion-card-content >
< div >
< ion-grid >
< ion-row >
< ion-col class = "colBold" >
< label for = "" > {{ts.trPK('payslip','peroid-name')}}
< / label >
< / ion-col >
< ion-col >
< label for = "" > {{showPaySlip.PERIOD_NAME}}< / label >
< / ion-col >
< / ion-row >
< div class = "" >
< div class = "header" >
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p> -->
< ion-row >
< ion-col class = "colBold" >
< label for = "" > {{ts.trPK('payslip','start-date')}}
< / label >
< / ion-col >
< ion-col >
< label for = "" > {{showPaySlip.PERIOD_START_DATE}}< / label >
< / ion-col >
< / ion-row >
< div >
< ion-row >
< ion-col >
< button ion-button icon-start class = "slidBtn" ( click ) = " slidePrev ( sliderOne , slideWithNav ) " >
< ion-icon [ ngClass ] = " payslipIndex = == GetPayslipList . length-1 ? ' disabledArrow ' : ' activeArrow ' " ios = "ios-arrow-dropleft-circle" md = "md-arrow-dropleft-circle" >
< / ion-icon >
< / button >
< / ion-col >
< ion-col >
< p class = "label" > < b style = "font-family: WorkSans-Bold;" > {{ (showPaySlip.PAYSLIP_CHOICE)?.substring(15,23) }}< / b > < / p >
<!-- <label class="label" for="">{{showPaySlip.PAYSLIP_CHOICE}}</label> -->
< ion-row >
< ion-col class = "colBold" >
< label for = "" > {{ts.trPK('payslip','end-date')}}
< / label >
< / ion-col>
< ion-col >
< label for = "" > {{showPaySlip.PERIOD_END_DATE}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
<!-- <label class="p" for="">{{showPaySlip.PERIOD_NAME}}</label> -->
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p> -->
< / ion-col >
< ion-col >
< button ion-button icon-end class = "slidbtn" ( click ) = " slideNext ( sliderOne , slideWithNav ) " >
< ion-icon [ ngClass ] = " payslipIndex = == 0 ? ' disabledArrow ' : ' activeArrow ' " ios = "ios-arrow-dropright-circle" md = "md-arrow-dropright-circle" >
< / ion-icon >
< / button >
< / ion-col >
< / ion-row >
< / div >
< / div >
< / ion-card-content >
< / ion-card > -->
< accordin-custom >
< accordin-tab-custom [ header ] = " ' payslip , summary-payment ' | translate " >
<!-- <ion - card *ngIf="GetSummaryOfPaymentList !='' " >
< ion-card-header class = "boxHdr" >
< div class = "hrTitle" > {{ts.trPK('payslip','summary-payment')}} < / div >
< / ion-card-header >
< ion-card-content > -->
< div * ngIf = "GetSummaryOfPaymentList !=''" >
< ion-grid >
< ion-slides [ options ] = " slideOptsOne " # slideWithNav ( ionSlideDidChange ) = " SlideDidChange ( sliderOne , slideWithNav ) " >
< ion-slide >
< ion-grid class = "headerGrid" >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','deductions-Amount')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','deductions-percentage')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_PERCENTAGE}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','earings-Amount')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','earings-percentage')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetSummaryOfPaymentList.TOTAL_EARNINGS_PERCENTAGE}}< / label >
< / ion-col >
< label class = "date" for = "" > {{showPaySlip.PERIOD_START_DATE}}< / label >
< label class = "label" for = "" > {{showPaySlip.PERIOD_END_DATE}}< / label >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','pay-Amount')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','pay-percentage')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetSummaryOfPaymentList.TOTAL_PAY_PERCENTAGE}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< div style = "color: black;" >
<!-- <ngx - gauge
*ngFor="let s of showPaySlip"
[type]="gaugeType"
[value]="gaugeValue"
[label]="gaugeLabel">
< / ngx-gauge > -->
< div class = "result-graph" >
<!-- <div class="request - heading">
< span > Open Request Analysis< / span >
< / div > -->
< div class = "result-text-container" >
< h2 > {{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}< / h2 >
<!-- <span>TOTAL <br> OPEN REQUEST</span> -->
< span > {{ts.trPK('payslip','total')}} < br > {{ts.trPK('payslip','salary')}}< / span >
< / div >
< empty-data * ngIf = "GetSummaryOfPaymentList.length <= 0 " > < / empty-data >
<!-- </ion - card - content>
< / ion-card > -->
< / accordin-tab-custom >
< / accordin-custom >
< accordin-custom >
< accordin-tab-custom [ header ] = " ' payslip , earnings ' | translate " [ subHeadergreen ] = true [ subHeader ] = " earingTotal " >
<!-- <ion - card *ngIf="GetEarningsList !='' " >
< ion-card-header class = "boxHdr" >
< div class = "hrTitle" > {{ts.trPK('payslip','total')}} < / div >
< / ion-card-header >
< ion-card-content > -->
< div * ngIf = "GetEarningsList !=''" >
< ion-grid >
< ion-row * ngFor = "let list of GetEarningsList" >
< ion-col class = "" >
< label for = "" > {{list.ELEMENT_NAME}}< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{list.AMOUNT}}< / label >
< / ion-col >
< p-chart # chart class = "today-graph" type = "doughnut" [ data ] = " data " [ options ] = " options " > < / p-chart >
< / div >
< div style = "position: relative ;
left: 77%;
bottom: 117px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;">
< ion-col >
< ion-row >
< label class = "green-label" > {{ts.trPK('payslip','earnings-key')}}< / label >
< / ion-row >
< ion-row >
< label class = "green-amount" > {{GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT}}< / label >
< / ion-row >
< / ion-col >
< / div >
< div style = "position: relative ;
left: 77%;
bottom: 67px;
color: black;
background-color: #094875;
width: 20%; height: 6px;">
< ion-col >
< ion-row >
< label class = "blue-label" > {{ts.trPK('payslip','deductions-key')}}< / label >
< / ion-row >
< ion-row >
< ion-col col-6 class = "earingTotH" >
< label style = "font-size: 20px !important" for = "" > {{ts.trPK('payslip','total')}}< / label >
< / ion-col >
< ion-col col-6 class = "earingTotG" >
< label style = "font-size: 20px !important" for = "" > {{earingTotal}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< label class = "blue-amount" for = "" > {{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}< / label >
< / ion-row >
< / ion-col >
< / div >
< / div >
< empty-data * ngIf = "GetEarningsList.length <= 0 " > < / empty-data >
<!-- </ion - card - content>
< / ion-card > -->
< / ion-grid >
< / ion-slide >
< / ion-slides >
< / div >
< / div >
<!-- <p>Summary of Payment</p> -->
< div class = "hrTitle" > {{ts.trPK('payslip','summary-payment')}} < / div >
< div * ngIf = "GetSummaryOfPaymentList !=''" >
< ion-grid class = "grids" >
< ion-row class = "bgcolor" >
< ion-col class = "colPayslip" >
< label class = "label" for = "" > {{ts.trPK('payslip','particular')}} < / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label class = "label" > %< / label >
< / ion-col >
< ion-col class = "colPayslips" >
< label class = "label" for = "" > {{ts.trPK('payslip','amount')}}
< / label >
< / ion-col >
< / ion-row >
< ion-row class = "rowtable" >
< ion-col class = "colPayslip" >
< label class = "label" for = "" > {{ts.trPK('payslip','deductions')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label class = "label" for = "" > {{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_PERCENTAGE}}< / label >
< / ion-col >
< ion-col class = "colPayslips" >
< label class = "label" for = "" > {{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}< / label >
< / ion-col >
<!-- <ion - infinite - scroll (ionInfinite)="doInfiniteEarning($event)">
< ion-infinite-scroll-content > < / ion-infinite-scroll-content >
< / ion-infinite-scroll > -->
< / accordin-tab-custom >
< / accordin-custom >
<!-- <accordin - custom *ngIf="GetDeductionsList !=''"> -->
< accordin-custom >
< accordin-tab-custom [ header ] = " ' payslip , deductions ' | translate " [ subHeadergreen ] = false [ subHeader ] = " deductionTotal " >
<!-- <ion - card *ngIf="GetDeductionsList !='' " >
< ion-card-header class = "boxHdr" >
< div class = "hrTitle" > {{ts.trPK('payslip','deductions')}} < / div >
< / ion-card-header >
< ion-card-content >
colBold -->
< div * ngIf = "GetDeductionsList !=''" >
< ion-grid >
< ion-row * ngFor = "let list of GetDeductionsList" >
< ion-col class = "" >
< label for = "" > {{list.ELEMENT_NAME}}< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{list.AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col col-6 class = "earingTotH" >
< label style = "font-size: 20px !important" for = "" > {{ts.trPK('payslip','total')}}< / label >
< / ion-col >
< ion-col col-6 class = "earingTotR" >
< label style = "font-size: 20px !important" for = "" > {{deductionTotal}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
< empty-data * ngIf = "GetDeductionsList.length <= 0 " > < / empty-data >
<!-- </ion - card - content>
< / ion-card > -->
<!-- <ion - infinite - scroll (ionInfinite)="doInfiniteDeduction($event)">
< ion-infinite-scroll-content > < / ion-infinite-scroll-content >
< / ion-infinite-scroll > -->
< / accordin-tab-custom >
< / accordin-custom >
< accordin-custom >
< accordin-tab-custom [ header ] = " ' payslip , payment-information ' | translate " >
<!-- <ion - card *ngIf="GetPaymentInformationList !='' " >
< ion-card-header class = "boxHdr" >
< div class = "hrTitle" > {{ts.trPK('payslip','payment-information')}} < / div >
< / ion-card-header >
< ion-card-content > -->
< div * ngIf = "GetPaymentInformationList !=''" >
< ion-grid >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','payment-method')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetPaymentInformationList.PAYMENT_METHOD_NAME}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','bank-name')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetPaymentInformationList.BANK_NAME}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','branch-name')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetPaymentInformationList.BRANCH_NAME}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','account-no')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetPaymentInformationList.ACCOUNT_NUMBER}}< / label >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col class = "" >
< label for = "" > {{ts.trPK('payslip','amount')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label for = "" > {{GetPaymentInformationList.AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
< empty-data * ngIf = "GetPaymentInformationList.length <= 0 " > < / empty-data >
<!-- </ion - card - content>
< / ion-card > -->
< / accordin-tab-custom >
< / accordin-custom >
< / ion-row >
< ion-row class = "rowtable" >
< ion-col class = "colPayslip" >
< label class = "label" for = "" > {{ts.trPK('payslip','earnings')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label class = "label" for = "" > {{GetSummaryOfPaymentList.TOTAL_EARNINGS_PERCENTAGE}}< / label >
< / ion-col >
< ion-col class = "colPayslips" >
< label class = "label" for = "" > {{GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< ion-row class = "rowtable" >
< ion-col class = "colPayslip" >
< label class = "label-bold" for = "" > {{ts.trPK('payslip','pay-Amount')}}
< / label >
< / ion-col >
< ion-col class = "colPayslip" >
< label class = "label-bold" for = "" > {{GetSummaryOfPaymentList.TOTAL_PAY_PERCENTAGE}}< / label >
< / ion-col >
< ion-col class = "colPayslips" >
< label class = "label-bold" for = "" > {{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
<!-- <ion - row *ngIf="showPaySlip !=''" style="text - align: center;">
< ion-col class = "greenTxt" col-6 >
< button ion-button block class = "notColBtn" ( click ) = " openEarings ( ) " >
< p > {{ts.trPK('payslip','earnings')}}< / p >
< ion-img class = "serviceItemImg" src = "../assets/imgs/details.png" > < / ion-img >
< / button >
< / ion-col >
< ion-col class = "greenTxt" col-6 >
< button ion-button block class = "notColBtn" ( click ) = " openDeductions ( ) " >
< p > {{ts.trPK('payslip','deductions')}}< / p >
< ion-img class = "serviceItemImg" src = "../assets/imgs/details.png" > < / ion-img >
< / button >
< / ion-col >
< / ion-row > -->
< div class = "hrTitle" > {{ts.trPK('payslip','earnings')}} < / div >
< div * ngIf = "GetEarningsList !=''" >
< ion-grid class = "grids" >
< ion-row class = "bgcolor" >
< ion-col class = "colPayslip" >
< label class = "label" for = "" > {{ts.trPK('payslip','particular')}} < / label >
< / ion-col >
< ion-col class = "colPayslips" >
< label class = "label" for = "" > {{ts.trPK('payslip','amount')}}
< / label >
< / ion-col >
< / ion-row >
< ion-row class = "rowtable" * ngFor = "let list of GetEarningsList" >
< ion-col class = "colPayslip" >
< label class = "label" for = "" > {{list.ELEMENT_NAME}}< / label >
< / ion-col >
< ion-col class = "colPayslips" >
< label class = "label" for = "" > {{list.AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
< div class = "hrTitle" > {{ts.trPK('payslip','deductions')}} < / div >
< div * ngIf = "GetDeductionsList !=''" >
< ion-grid class = "grids" >
< ion-row class = "bgcolor" >
< ion-col class = "colPayslip" >
< label class = "label" for = "" > {{ts.trPK('payslip','particular')}} < / label >
< / ion-col >
< ion-col class = "colPayslips" >
< label class = "label" for = "" > {{ts.trPK('payslip','amount')}}
< / label >
< / ion-col >
< / ion-row >
< ion-row class = "rowtable" * ngFor = "let list of GetDeductionsList" >
< ion-col class = "colPayslip" >
< label class = "label" for = "" > {{list.ELEMENT_NAME}}< / label >
< / ion-col >
< ion-col class = "colPayslips" >
< label class = "label" for = "" > {{list.AMOUNT}}< / label >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
<!-- ///////////////////////////////////// -->
<!-- <ion - item style="margin: 10px;border - radius: 5px;">
< ion-label > choose payslip< / ion-label >
< ion-select ( ionChange ) = " showInfo ( $ event ) " okText = "{{ts.trPK('general','ok')}}" cancelText = "{{ts.trPK('general','cancel')}}" [ ( ngModel ) ] = " choosePayslip " >
< ion-select-option value = "{{i}}" selected = "{{(i==0).toString()}}" * ngFor = "let options of GetPayslipList; let i=index" > {{options.PAYSLIP_CHOICE}} < / ion-select-option >
< / ion-select >
< / ion-item > -->
< div class = "hrTitle" > {{ts.trPK('payslip','payment-information')}} < / div >
< div * ngIf = "GetPaymentInformationList !=''" >
< ion-grid class = "grids" >
< ion-row class = "rowtables" >
< ion-col class = "colPayslips" >
< ion-row class = "col" >
< label class = "label" for = "" > {{ts.trPK('payslip','payment-method')}} < / label >
< / ion-row >
< ion-row >
< label class = "label" for = "" > {{GetPaymentInformationList.PAYMENT_METHOD_NAME}}< / label >
< / ion-row >
< / ion-col >
< / ion-row >
< ion-row class = "rowtable" >
< ion-col class = "colPayslip" >
< ion-row class = "col" >
< label class = "label" for = "" > {{ts.trPK('payslip','bank-name')}} < / label >
< / ion-row >
< ion-row >
< label class = "label" for = "" > {{GetPaymentInformationList.BANK_NAME}}< / label >
< / ion-row >
< / ion-col >
< ion-col class = "colPayslips" >
< ion-row class = "col" >
< label class = "label" for = "" > {{ts.trPK('payslip','branch-name')}}
< / label >
< / ion-row >
< ion-row >
< label class = "label" for = "" > {{GetPaymentInformationList.BRANCH_NAME}}< / label >
< / ion-row >
< / ion-col >
< / ion-row >
< ion-row class = "rowtable" >
< ion-col class = "colPayslip" >
< ion-row class = "col" >
< label class = "label" for = "" > {{ts.trPK('payslip','account-no')}}
< / label >
< / ion-row >
< ion-row >
< label class = "label" for = "" > {{GetPaymentInformationList.ACCOUNT_NUMBER}}< / label >
< / ion-row >
< / ion-col >
< ion-col class = "colPayslips" >
< ion-row class = "col" >
< label class = "label" for = "" > {{ts.trPK('payslip','amount')}}
< / label >
< / ion-row >
< ion-row >
< label class = "label" for = "" > {{GetPaymentInformationList.AMOUNT}}< / label >
< / ion-row >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
< / ion-content >