Trick To Redirect New Window Or Tab With Post Method On Angular 5

I have not found a suitable library to redirect a page to a new tab using the post method on angular 2, 4, 5 and latest. I Using native javascript makes a simple service, so the app can redirect to a new page using the post method. Who knows any of you who need this script. Follow the tutorial open new tab with post method in angular below.

Create a simple plugin to redirect a new window with the post angular method

1. Create a new service named redirect.service.ts or use the following angular cli service

ng generate service redirect

1	ng generate service redirect

2. open redirect.service.ts and fill in the following script

import { Injectable } from '@angular/core';

@Injectable()
export class RedirectService {
  constructor() { }
  post(obj,url) {
    var mapForm = document.createElement("form");
    mapForm.target = "_blank";
    mapForm.method = "POST"; // or "post" if appropriate
    mapForm.action = url;
    Object.keys(obj).forEach(function(param){
      var mapInput = document.createElement("input");
      mapInput.type = "hidden";
      mapInput.name = param;
      mapInput.setAttribute("value", obj[param]);
      mapForm.appendChild(mapInput);
  });
  document.body.appendChild(mapForm);
  mapForm.submit();
}

}

import { Injectable } from '@angular/core';

@Injectable()

export class RedirectService {

constructor() { }

post(obj,url) {

var mapForm = document.createElement("form");

mapForm.target = "_blank";

mapForm.method = "POST"; // or "post" if appropriate

mapForm.action = url;

Object.keys(obj).forEach(function(param){

var mapInput = document.createElement("input");

mapInput.type = "hidden";

mapInput.name = param;

mapInput.setAttribute("value", obj[param]);

mapForm.appendChild(mapInput);

});

document.body.appendChild(mapForm);

mapForm.submit();

}

3. Add the service you created earlier into app.module.ts

import { RedirectService } from './redirect.service';

@NgModule({
  declarations: [
   ...........
  ],
  imports: [
   ........
  ],
  providers: [RedirectService],
  bootstrap: [AppComponent]
})

import { RedirectService } from './redirect.service';

@NgModule({

declarations: [

...........

imports: [

........

providers: [RedirectService],

bootstrap: [AppComponent]

})

4. To use the redirect plugin, follow these steps

import { RedirectService } from './redirect.service';

@Component({
  selector: 'app-root',
  templateUrl: './app-root.html',
  styleUrls: ['./app-root.scss']
})
export class AppComponent {
  constructor(
 private opentab: RedirectService,
  ){  }
}

import { RedirectService } from './redirect.service';

@Component({

selector: 'app-root',

templateUrl: './app-root.html',

styleUrls: ['./app-root.scss']

})

export class AppComponent {

constructor(

private opentab: RedirectService,

){ }

}

let param = {id_trx:res.param.newidtrx};
this.opentab.post(param,"http://192.168.1.20/laporan_sila/nota_tanda_terima.php");

1 2	let param = {id_trx:res.param.newidtrx}; this.opentab.post(param,"http://192.168.1.20/laporan_sila/nota_tanda_terima.php");

Another article : Angular 4 Tutorial For Beginner With Simple App Project

So my short tutorial Redirect New Window Or Tab With Post Method On Angular 5, hopefully useful

Bio
Latest Posts

Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Latest posts by Sigit Prasetya Nugroho (see all)

Create WordPress Slider Without Javascript - August 30, 2018
Typed.js The Javascript Library For Automatic Text Writing Effects - August 6, 2018
Let’s Get Acquainted And Learn About VUE JS 2 Tutorial For Beginners - August 6, 2018

seegatesite

Seegatesite.com – Programming Tutorial , Sharing , How and Learn Together