Angular animated counter for widgets and numbers

Basic Angular animated counter for widgets and numbers with a start and end. Working demo link below on stackblitz: This is an array of counters so many can be used once. Creating a method for each counter incremented based on start and final ratio. It will stop once counter hit the maximum limit of that …

Angular pagination

Why do i required. I found ngx-pagination which had all the collections like items = array(512) and shows the pagination based on 512 results. But i needed to hit the APIs each time when page changes and fetch the only records of a singe page based on skip and limit. So i created a pagination …

Make profile picture placeholder by first two character of name

Make profile picture placeholder by first two character of name. I have been working on a project where i needed to make some profile picture to work as based on the first two character of the names at the time when users have not updated his picture. This you have been seen working in the …

angular 6 custom moment pipe like whatsapp dates on chat application

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 …

Angular6 – Add dynamic class to the body based on route.

Adding dynamic classes to the angular6 based on route.   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 …

Running AngularApp dependent on API data

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 …

Rainbow background to a html using javascript

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 …

Get current country in angular 5 using geolocation

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 …

filereader is not working in angular 2 angular 4

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. 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 …