Posts

ionic 5 datatable

https://swimlane.github.io/ngx-datatable/#toggle https://www.positronx.io/create-ionic-data-table-with-ngx-datatable/ <app-header></app-header> <ion-content padding>   <div class="margin">     <p  style="text-align:right;width:100%">       {{this.today  | date:'dd MMM yyyy'}} <span   style="float:right;margin-left:10px;">{{this.time}}</span>     </p>      <ngx-datatable     [sortType]="'multi'"          [headerHeight]="100"      [footerHeight]="50"     [rowHeight]="50"     [scrollbarH]="true"     [scrollbarV]="true"     [rows]="this.rows"      [columns]="columns"      [columnMode]="'force'"     (page)="onPage($event)"     (activate)="onActivate($event)"     [limit]="5" class="bootstrap material"      ...

ionic5 filter with all columns in array

npm i ng2-search-filter -->install import { Ng2SearchPipeModule } from 'ng2-search-filter'; Ng2SearchPipeModule  import in app module add Ng2SearchPipeModule  to page module--> <ion-header>   <ion-toolbar>     <ion-title>Ionic Search</ion-title>   </ion-toolbar> </ion-header> <ion-content class="ion-padding">   <!-- Search Bar -->   <ion-searchbar placeholder="Filter Schedules" [(ngModel)]="term" animated="true"></ion-searchbar>   <!-- List Items -->   <ion-list>     <ion-item *ngFor="let item of filterData | filter:term">       <ion-label>{{item.firstName}} {{item.lastName}}</ion-label>     </ion-item>   </ion-list> </ion-content> import { Component, OnInit } from '@angular/core'; @Component({   selector: 'app-search',   templateUrl: './search.page.html',   styleUrls: ['...

ionic5search

import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; /*   Generated class for the DataProvider provider.   See https://angular.io/guide/dependency-injection for more info on providers   and Angular DI. */ @Injectable({   providedIn: 'root' }) export class DataService{   items:{firstname:any,lastname:any}[]=[];     constructor(public http: HttpClient) {     console.log('Hello DataProvider Provider');   }     getplist(list:any){       list.map(data=>{       this.items.push(data);     });   }   filterItems(searchTerm) {       console.log(searchTerm)     return this.items.filter((item) => {     return item.firstname?item.firstname.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1:'';       });   } }

ionic5 menu submenu functionality

<ion-app>   <ion-split-pane contentId="main-content">     <ion-menu contentId="main-content" type="overlay">       <ion-header>         <ion-toolbar>           <ion-grid style="background-image: linear-gradient(45deg, #165997, #144e8d);           color: #fff;">             <ion-row>               <ion-col size="3">                 <ion-avatar>                     <img src="http://207.38.84.105/Nakhas/public/images/fromserver/sidelogo.png" alt="" class="imagehead" style="width:100%;">                           </ion-avatar>                        ...

ionic3

npm install -g cordova ionic@3.2.0

ionic5 video upload

<ion-item>           <ion-label>Upload Video Resume</ion-label>           <ion-input type="file" (change)="onFileChanged($event)" accept="video/*" formControlName="video"></ion-input>           <video [src]="url" *ngIf="url" height="200" controls></video> <br/>         </ion-item> onFileChanged(event: any) {     if (event.target.files && event.target.files.length > 0) {       const max_size = 20000000;       const allowed_types = ['video/mp4', 'video/avi'];         if (event.target.files[0].size > max_size) {           console.log("entered in loop")           this.imageError = 'Maximum size allowed is ' + max_size / 1000 + 'Mb';           console.log(this.imageError)        ...

ionic multiselect

 <ion-item>       <ion-label>Select class</ion-label>             <ion-select formControlName="class" (ionChange)="selectClass()" multiple="true" [(ngModel)]="classstudy"  cancelText="Nah" okText="Okay!">               <ion-select-option value="{{d.Id}}" *ngFor="let d of class">{{d.class}}</ion-select-option>             </ion-select>           </ion-item>