Author: admin

Console.log

console.log = function() {}
var a = 5;

console.log(a)

Now you will not see any console.

alert

alert = function() {}
var a = 5;

alert(a)

Now you will not see any alert

If you want to send you form detail to your mail ID

–contact.component.ts

onSubmit(){
    this.data = this.contactForm.value;
    this.http.post('http://pkanvi.com/send.php', this.data)
      .subscribe(
        (res:Response) => {
          console.log(res.json());
        },
        err => {
          console.log("Error occured");
        }
      );
  }

–send.php

<?php
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
header('Content-type: application/json');
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Headers: X-Requested-With, content-type, access-control-allow-origin, access-control-allow-methods, access-control-allow-headers');

echo json_encode($request);

$to = 'test.abc@gmail.com';
$subject = 'PK Anvi - Query';
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= 'From:PK Anvi <'.$request->mail.'>' . "\r\n";
$message = '<table>';
$message .= '<tr>';
$message .= '<td>Name:</td>'.'<td>'.$request->name.'</td>';
$message .= '</tr>';
$message .= '<tr>';
$message .= '<td>Email ID:</td>'.'<td>'.$request->email.'</td>';
$message .= '</tr>';
$message .= '<tr>';
$message .= '<td>Phone No:</td>'.'<td>'.$request->phone.'</td>';
$message .= '</tr>';
$message .= '<tr>';
$message .= '<td>Message:</td>'.'<td>'.$request->comment.'</td>';
$message .= '</tr>';

if(mail($to, $subject, $message, $headers)){
echo "Your Query Successfully Sent, we will get back to you seen.";
}?>

$('').click

is not working on mobile device

Don’t worry about this issue. Just use on with click touchstart

$('.fancybox').on('click touchstart', function(){
	$('.order_target .elementor-button').click();
});

Add # Symbol after domain name in angular 4

–app-routing.module.ts

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes, {useHash: true})
    ],
    exports: [RouterModule]
})

Get dynamic data from route with resolve in Angular 4

Create server resolver service

–server-resolver.service.ts

import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
import { Observable } from "rxjs/Observable";
import { Injectable } from "@angular/core";
import { ServersService } from "app/servers/servers.service";

interface Server {
    id:number;
    name:string;
    status:string;
}

@Injectable()
export class ServerResolver implements Resolve {
    constructor(private serversService: ServersService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | Server {
        return this.serversService.getServer(+route.params['id']);
    }
}

–server.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router, Data } from "@angular/router";

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {
  server: {id: number, name: string, status: string};

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data
      .subscribe(
        (data: Data) => {
          this.server = data['server']
        }
      )
  }

}

–app-routing.module.ts

const appRoutes: Routes = [
    { path: '', redirectTo:'/home', pathMatch:'full'},
    { path: 'home', component: HomeComponent},
    { path: 'users', component: UsersComponent, children: [
      { path: ':id/:name', component: UserComponent},
    ]},
    { path: 'servers', canActivateChild:[AuthGuard], component: ServersComponent, children: [
      { path: ':id', component: ServerComponent, resolve: {server: ServerResolver}},
      { path: ':id/edit', component: EditServerComponent, canDeactivate: [CanDeactivateGuard]},
    ]},
    { path: 'error-404', component: ErrorPageComponent, data: {message: 'Page not found!'}},
    { path: '**', redirectTo: '/error-404'}
  ]

pass static data from route in Angular 4

Create a error page component

ng g c error page

–error-page.component.html

<h4>{{ errorMassage }}</h4>

–error-page.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Data } from '@angular/router';

@Component({
  selector: 'app-error-page',
  templateUrl: './error-page.component.html',
  styleUrls: ['./error-page.component.css']
})
export class ErrorPageComponent implements OnInit {
  errorMassage: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data.subscribe(
      (data: Data) => {
        this.errorMassage = data['message'];
      }
    )
  }

}

–app-routing.module.ts

const appRoutes: Routes = [
    { path: '', redirectTo:'/home', pathMatch:'full'},
    { path: 'home', component: HomeComponent},
    { path: 'users', component: UsersComponent, children: [
      { path: ':id/:name', component: UserComponent},
    ]},
    { path: 'servers', canActivateChild:[AuthGuard], component: ServersComponent, children: [
      { path: ':id', component: ServerComponent},
      { path: ':id/edit', component: EditServerComponent, canDeactivate: [CanDeactivateGuard]},
    ]},
    { path: 'error-404', component: ErrorPageComponent, data: {message: 'Page not found!'}},
    { path: '**', redirectTo: '/error-404'}
  ]

Add a confirm massage whenever we going to Homepage from Edit page without saving something.

–can-deactivate-guard.service.ts

import { Observable } from "rxjs/Observable";
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";

export interface CanComponentDeactivate {
    canDeactivate: () => Observable | Promise | boolean;
}

export class CanDeactivateGuard implements CanDeactivate {
    canDeactivate(component: CanComponentDeactivate,
                  currentRoute: ActivatedRouteSnapshot,
                  currentState: RouterStateSnapshot,
                  nextState?: RouterStateSnapshot): Observable | Promise | boolean {
                      return component.canDeactivate();
                  }
}

–edit-server.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from "@angular/router";
import { Observable } from "rxjs/Observable";

import { ServersService } from '../servers.service';
import { CanComponentDeactivate } from "./can-deactivate-guard.service";

@Component({
  selector: 'app-edit-server',
  templateUrl: './edit-server.component.html',
  styleUrls: ['./edit-server.component.css']
})
export class EditServerComponent implements OnInit, CanComponentDeactivate {
  server: {id: number, name: string, status: string};
  serverName = '';
  serverStatus = '';
  allowEdit = false;
  changeSaved = false;

  constructor(private serversService: ServersService,
              private route: ActivatedRoute,
              private router: Router) { }

  ngOnInit() {
    console.log(this.route.snapshot.queryParams);
    console.log(this.route.snapshot.fragment);
    this.route.queryParams
      .subscribe(
        (queryParams: Params) => {
          this.allowEdit = queryParams['allowEdit'] === '1' ? true : false;
        }
      );
    this.route.fragment.subscribe();
    const id = +this.route.snapshot.params['id'];
    this.server = this.serversService.getServer(id);
    // Subscribe route params to update the id if params change
    this.serverName = this.server.name;
    this.serverStatus = this.server.status;
  }

  onUpdateServer() {
    this.serversService.updateServer(this.server.id, {name: this.serverName, status: this.serverStatus});
    this.changeSaved = true;
    this.router.navigate(['../'], {relativeTo: this.route})
  }

  canDeactivate(): Observable | Promise | boolean{
    if(!this.allowEdit) {
      return true;
    }
    if(this.serverName !== this.server.name || this.serverStatus !== this.server.status && this.changeSaved){
      return confirm('Do you want to discard the changes?');
    } else {
      return true;
    }
  } 

}

–app.routing.module.ts

const appRoutes: Routes = [
    { path: '', redirectTo:'/home', pathMatch:'full'},
    { path: 'home', component: HomeComponent},
    { path: 'users', component: UsersComponent, children: [
      { path: ':id/:name', component: UserComponent},
    ]},
    { path: 'servers', canActivateChild:[AuthGuard], component: ServersComponent, children: [
      { path: ':id', component: ServerComponent},
      { path: ':id/edit', component: EditServerComponent, canDeactivate: [CanDeactivateGuard]},
    ]},
    { path: 'error-404', component: Page404Component},
    { path: '**', redirectTo: '/error-404'}
  ]

Use auth service for login and logout

–home.component.html

<button class="btn btn-primary" (click)="onLogin()">Login</button>
<button class="btn btn-primary" (click)="onLogout()">Logout</button>

–home.component.ts

import { AuthService } from "../auth.service";

onLogin(){
    this.authService.login();
  }

onLogout(){
    this.authService.logout();
}

Now you can navigate child route of server page when you clicked login button.

canActive used for protect also for child routes in angular 4

Create auth.service.ts file

–auth.service.ts

export class AuthService {
    loggedIn = false;

    isAuthenticated(){
        const promise = new Promise(
            (resolve, reject) => {
                setTimeout(() => {
                    resolve(this.loggedIn)
                }, 800);
            }
        )
        return promise;
    }

    login() {
        this.loggedIn = true;
    }

    logout(){
        this.loggedIn = false;
    }
}

Create auth-guard.service.ts file

–auth-guard.service.ts

import { Injectable } from "@angular/core";
import { CanActivate, CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
import { Observable } from "rxjs/Observable";
import { AuthService } from "./auth.service";

@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild {
    constructor(private authService: AuthService, private router: Router) {}

    canActivate(route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot ): Observable | Promise | boolean {
        return this.authService.isAuthenticated()
            .then(
                (authenticated: boolean) => {
                    if(authenticated) {
                        return true;
                    } else {
                        this.router.navigate(['/']);
                    }
                }
            )
    }
    
    canActivateChild(route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot ): Observable | Promise | boolean {
            return this.canActivate(route, state);
    }
}

Add into routing code.

const appRoutes: Routes = [
    { path: '', redirectTo:'/home', pathMatch:'full'},
    { path: 'home', component: HomeComponent},
    { path: 'users', component: UsersComponent, children: [
      { path: ':id/:name', component: UserComponent},
    ]},
    { path: 'servers', canActivateChild:[AuthGuard], component: ServersComponent, children: [
      { path: ':id', component: ServerComponent},
      { path: ':id/edit', component: EditServerComponent},
    ]},
    { path: 'error-404', component: Page404Component},
    { path: '**', redirectTo: '/error-404'}
  ]

Now you can see, you not able to go in pages of servers page.

canActive used for protect routes in angular 4

Create auth.service.ts file

–auth.service.ts

export class AuthService {
    loggedIn = false;

    isAuthenticated(){
        const promise = new Promise(
            (resolve, reject) => {
                setTimeout(() => {
                    resolve(this.loggedIn)
                }, 800);
            }
        )
        return promise;
    }

    login() {
        this.loggedIn = true;
    }

    logout(){
        this.loggedIn = false;
    }
}

Create auth-guard.service.ts file

–auth-guard.service.ts

import { Injectable } from "@angular/core";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
import { Observable } from "rxjs/Observable";
import { AuthService } from "./auth.service";

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private authService: AuthService, private router: Router) {}

    canActivate(route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot ): Observable | Promise | boolean {
        return this.authService.isAuthenticated()
            .then(
                (authenticated: boolean) => {
                    if(authenticated) {
                        return true;
                    } else {
                        this.router.navigate(['/']);
                    }
                }
            )
    } 
}

Add into routing code.

const appRoutes: Routes = [
    { path: '', redirectTo:'/home', pathMatch:'full'},
    { path: 'home', component: HomeComponent},
    { path: 'users', component: UsersComponent, children: [
      { path: ':id/:name', component: UserComponent},
    ]},
    { path: 'servers', canActivate:[AuthGuard], component: ServersComponent, children: [
      { path: ':id', component: ServerComponent},
      { path: ':id/edit', component: EditServerComponent},
    ]},
    { path: 'error-404', component: Page404Component},
    { path: '**', redirectTo: '/error-404'}
  ]

Now you can see, you not able to go servers page.