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 …
Read more “Angular animated counter for widgets and numbers”
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. 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 …
Read more “Make profile picture placeholder by first two character of name”
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 “angular 6 custom moment pipe like whatsapp dates on chat application”
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 …
Read more “Angular6 – Add dynamic class to the body based on route.”
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 …
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() this.router.events.subscribe(route => { window.scrollTo(0, 0); })
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 …
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 “Get current country in angular 5 using geolocation”
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 …
Read more “filereader is not working in angular 2 angular 4”