SHAKALYA - Full stack developer

Aug03 Comments Off

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 (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;
        }
      });

  }
}

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;

}

});

}

Dec14 Comments Off

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 […]

Dec14 Comments Off

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);
    })

this.router.events.subscribe(route => {

window.scrollTo(0, 0);

})

Nov07 Comments Off

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 […]

Feb12 Comments Off

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 […]

Feb09 Comments Off

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 […]

Aug20 Comments Off

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 = (e:any)=>{console.log(e)};

       fileReader.readAsDataURL(event.target.files[0]); //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 = (e:any)=>{console.log(e)};

fileReader.readAsDataURL(event.target.files[0]); //reading the file

}

Aug08 Comments Off

Quick htaccess for angular production build whcih we can use under dist folder. I mostly uses the same so took a backup here.

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

#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>

Jul11 Comments Off

sudo su echo “blacklist peaq_wmi” >> /etc/modprobe.d/50-blacklist.conf

Jul02 Comments Off

Use Current Release: At te last update of this tutorial, Node.js 10.0.0 is the current Node.js release available.

sudo apt-get install curl python-software-properties
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

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.

sudo apt-get install curl python-software-properties
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -

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.

<strong>node -v </strong>

v10.0.0

v10.0.0

Also, check the npm version

<strong>npm -v </strong>

6.0.0

6.0.0

Full stack developer

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

Running AngularApp dependent on API data

Auto page scroll to top after moving to new route in angularX

Rainbow background to a html using javascript

Get current country in angular 5 using geolocation

angular 5 drag and drop form builder

filereader is not working in angular 2 angular 4

Quick htaccess for angular 4/5/6 app production build

Long press not working in ubuntu?

Installing NODE, NPM , angular

August 2020
M	T	W	T	F	S	S
« Dec
					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