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.

Table of Contents

1 Create a simple plugin to redirect a new window with the post angular method
- 1.1 So my short tutorial Redirect New Window Or Tab With Post Method On Angular 5, hopefully useful

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

Comments

leo says
October 31, 2018 at 8:34 am
HI, The Safari browser is not working ?
DO you have any solution, please?
Divakar says
December 10, 2018 at 11:47 am
I’m looking forward for this code and ill try to work on it
Yousuf Zaman says
December 29, 2018 at 7:39 pm
Thanks a lot for your nice trick to bypass the redirection relation issue to any external target.
It worked for me, but needed to do more test.
Thanks again.
Mduduzi says
July 31, 2020 at 7:47 am
Hi Sigit Prasetya Nugroho,
Thanks for the great work on this. I had been working on payfast integration for more than a week, you site has helped me deeply. thanks so much

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

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

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

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

4. To use the redirect plugin, follow these steps

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

About Sigit Prasetya Nugroho

Comments

Leave a Reply Cancel reply

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

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

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

4. To use the redirect plugin, follow these steps

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

Another Javascript Related Post :

About Sigit Prasetya Nugroho

Reader Interactions

Comments

Leave a Reply Cancel reply