Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Ibby Hadeed ihadeed

🎯
Focusing
View GitHub Profile
@ihadeed
ihadeed / home.html
Last active Aug 8, 2017
angular2-text-mask with Ionic 2
View home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="home">
<ion-list>
<ion-item>
<ion-label>Something</ion-label>
@ihadeed
ihadeed / pn.ts
Created Aug 27, 2016
Push Notification Example
View pn.ts
import gcm = require('node-gcm');
let sender = new gcm.Sender('YOUR_GCM_SENDER_ID'); // this is basically your API key
function sendPushNotification(message, gcmIds){
sender.send(message, {registerationTokens: gcm_ids}, (err, response) => {
if(err) console.log(err);
console.log(response);
});
@ihadeed
ihadeed / client.ts
Last active Feb 12, 2018
Ionic/Cordova Image Upload to AWS
View client.ts
changeAvatar(): void {
let handler: Function = (source: number) => {
let updateAvatar: Function = (image_url?: string) => {
this.api.post('user/avatar', {image_url: image_url})
.then(
()=> {
this.events.publish('auth:status', true);
this.updateUserInfo();
},
(e)=>console.error(e)
@ihadeed
ihadeed / googlemap.component.ts
Last active Sep 8, 2017
Ionic 2 + Ionic Native + Google Maps Plugin
View googlemap.component.ts
import { Component, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
import { Platform } from 'ionic-angular';
import { GoogleMap } from 'ionic-native';
@Component({
selector: 'GoogleMap',
template: '<div [id]="id" [style.height]="height" [style.width]="width" style="display: block;"></div>'
})
export class GoogleMapComponent implements AfterViewInit {
@Input() id: string = 'GoogleMap';
@Input() height: string = '100%';
@ihadeed
ihadeed / dropdown.ts
Created Jul 10, 2016
Angular2 Component: Semantic UI Dropdown
View dropdown.ts
import {Component, ElementRef, AfterViewInit, Output, EventEmitter, Input, Self} from '@angular/core';
import {ControlValueAccessor, NgModel} from '@angular/common';
declare var $: any;
@Component({
selector: 'dropdown',
template: `
<select class="ui dropdown" [(ngModel)]="selectedOption">
<option value="">Select one</option>
<option *ngFor="let item of items" [value]="item[valueField]">{{item[textField]}}</option>
</select>
@ihadeed
ihadeed / calendar.ts
Last active Feb 24, 2018
Angular2 Component: Semantic-UI Calendar Component (date/time picker)
View calendar.ts
import {Component, ElementRef, AfterViewInit, Output, EventEmitter, Input, Self} from '@angular/core';
import {ControlValueAccessor, NgModel} from '@angular/common';
declare var $: any;
@Component({
selector: 'calendar',
template: `
<div class="ui calendar">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="Click to select Date/Time" [value]="initialDate">
@ihadeed
ihadeed / places-auto-complete.ts
Last active Jul 10, 2016
Angular2 Component: Google Maps Places AutoComplete
View places-auto-complete.ts
import {Component, ElementRef, Output, EventEmitter, AfterViewInit, OnDestroy} from '@angular/core';
declare var google: any;
@Component({
selector: 'places-auto-complete',
template: `
<input type="text">
`
})
export class PlacesAutoCompleteComponent implements AfterViewInit, OnDestroy {
@Output() placeChange: EventEmitter<any> = new EventEmitter<any>();
@ihadeed
ihadeed / confirm-button.ts
Created Jul 8, 2016
Angular2 Component: Button that you have to click twice to perform an action (for confirmation)
View confirm-button.ts
import {Component, Input} from '@angular/core';
@Component({
selector: 'confirm-button',
template: `
<button class="ui {{size}} {{color}} button" (click)="clickHandler($event)">
<i *ngIf="!isClickedOnce && icon" class="{{icon}} icon"></i>
{{isClickedOnce? confirmText : text}}
</button>
`
@ihadeed
ihadeed / pagination.ts
Last active Feb 11, 2020
Angular2 Component: Pagination (optionally uses semantic-ui)
View pagination.ts
import {Component, Input, Output, AfterViewInit, EventEmitter, NgZone, Self} from '@angular/core';
import {NgClass} from '@angular/common';
import {ControlValueAccessor, NgModel} from '@angular/common';
@Component({
selector: 'pagination',
template: `<div class="ui borderless menu" *ngIf="numberOfPages > 1">
<a class="item" (click)="selectPage(1)" [ngClass]="{active: selectedPage==1}">{{1}}</a>
<a class="item disabled" *ngIf="numberOfPages > 10 && selectedPage > 5">...</a>
<a class="item" *ngFor="let page of pages" (click)="selectPage(page)" [ngClass]="{active: selectedPage==page}">{{page}}</a>