Adding a rainbow background to a landing page is so awesome. Please check the demo here https://jsfiddle.net/shakalya/dmchaxfn/ Here we are setting a hue value and increasing dynamically. This is so cool where we can set the dark or light colors by setting the saturation and light property of it. Changing the Hue will the […]
Read More →In typescript working with angular 6, i needed to make a async function which respond with current countryCode based on users geoLocation. So here I am using nevigator get the current lat lng. Its not possible to get the country code directly from nevigator. SO i needed googleMapsApi By using import { MapsAPILoader } from […]
Read More →
If you guys looking for some basic angular 5 dynamic drag and drop custom form builder check out my small project at Demo: http://formbuilder.shakalya.com Github: https://github.com/shakalya195/angular-5-formbuilder Hello guys i needed to build an custom formbuilder for surveys which was most of similar to google forms but problem was i can’t have the data in […]
Read More →filereader is not working in angular 2 angular 4. I found that Filereader needs fileReader.readAsDataURL(event.target.files[0]) to start reading the file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
onSelectFile(event) { // called each time file input changes // this.uploader.onSelectFile1(event); if (event.target.files && event.target.files[0]) { const fileReader: FileReader = new FileReader(); console.log(event); fileReader.onloadstart = (e:any)=>{console.log(e)}; fileReader.onload = (event: Event) => { console.log(fileReader.result); }; fileReader.onerror = (e:any)=>{console.log(e)}; fileReader.readAsDataURL(event.target.files[0]); //reading the file } } |
Read More →
Quick htaccess for angular production build whcih we can use under dist folder. I mostly uses the same so took a backup here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<IfModule mod_rewrite.c> #RewriteEngine on #RewriteCond %{REQUEST_URI} !^/index.html$ #RewriteRule . index.html [R=302,L] RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] # If the requested resource doesn't exist, use index.html RewriteRule ^ /index.html </IfModule> |
Read More →
Use Current Release: At te last update of this tutorial, Node.js 10.0.0 is the current Node.js release available.
|
1 2 |
sudo apt-get install curl python-software-properties curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - |
Use LTS Release : At the last update of this tutorial, Node.js 8.11.1 is the LTS release available.
|
1 2 |
sudo apt-get install curl python-software-properties curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - |
testing node.js official website.
|
1 2 3 |
<strong>node -v </strong> v10.0.0 |
Also, check the npm version
|
1 2 3 |
<strong>npm -v </strong> 6.0.0 |
Read More →
Angular 2 directive to append HTML in directive selector. I was trying creating a star rating directive for angular 5 project. It was really hard search for me to insert HTML in to directive selector. I know an component can easily allows access to append HTML inside the element. But i needed to do this […]
Read More →Add to compare service for observable array of objects for products
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() export class SharedService { compareProducts:Array<Product> = []; private compareSource = new BehaviorSubject<Product[]>([]); currentCompare = this.compareSource.asObservable(); constructor() { } addToCompare(productModel){ var index = this.compareProducts.findIndex(item => item.id === productModel.id); if(index > -1){ this.compareProducts.splice(index,1); }else{ this.compareProducts.push(productModel); } //orders.splice(index, 1); this.compareSource.next(this.compareProducts); console.log(this.compareProducts); } } export class Product{ id?: any; product_id?: any; attachments?:any; attributes?: any; category_id?:any; currency?: any; currency_id?: any; description?: any; discount?: any; discount_amount?:any; highlights?:Array<any>; images?: any; is_active?: any; image?: any; min_order_qty?: any; name?: any; price?: any; product_attributes?:any; product_code?:any; reviews?: any; reviews_count?: any; show_price?: any; } |
Subscribe this currentCompare to get the current array of products into compare. addToCompare do work like toggle here if we found the object in this compareProducts array we do remove it from here and if we dont find it here we do add […]
Read More →