Angular 6 custom moment pipe just like whatsapp dates on chat application Here i am creating a pipe ‘moment’ with a parameter ‘fromNow’ which will be used for 3 reasons. less then a day messages will be showing from now variables. like 0 to 44 seconds s a few seconds ago unset ss 44 seconds […]
Read More →Adding dynamic classes to the angular6 based on route.
|
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 |
import { Component, Renderer2 } from '@angular/core'; import { Router, NavigationStart } from '@angular/router'; import './operators'; @Component({ moduleId: module.id, selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], }) export class AppComponent { previousUrl: string; constructor( private renderer: Renderer2, private router: Router ) { this.router.events.subscribe((event) => { if (event instanceof NavigationStart) { if (this.previousUrl) { let arr = this.previousUrl.split('/'); arr.forEach(item=>{ this.renderer.removeClass(document.body, item); }) } let currentUrlSlug = event.url.slice(1) if (currentUrlSlug) { let arr = currentUrlSlug.split('/'); arr.forEach(item=>{ this.renderer.addClass(document.body, item); }) } this.previousUrl = currentUrlSlug; } }); } } |
Read More →
I had a bug where my application needed currency conversion data to change the currencies via angular PIPES. Pipes has advantages of changing the currencies at front end while disadvantage of Independency from basic component rendering. My component renders so quickly. My pipes needed currency conversion data from a service. So it was showing blank […]
Read More →Put the bellow code in your angular app.component.ts for auto page scroll to top after moving to new route in any angular 2+ version. app.component.ts in constructor() or ngOnInit()
|
1 2 3 |
this.router.events.subscribe(route => { window.scrollTo(0, 0); }) |
Read More →
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 →