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
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
1 | ng generate service redirect |
2. open redirect.service.ts and fill in the following script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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
1 2 3 4 5 6 7 8 9 10 11 12 | import { RedirectService } from './redirect.service'; @NgModule({ declarations: [ ........... ], imports: [ ........ ], providers: [RedirectService], bootstrap: [AppComponent] }) |
4. To use the redirect plugin, follow these steps
1 2 3 4 5 6 7 8 9 10 11 12 | import { RedirectService } from './redirect.service'; @Component({ selector: 'app-root', templateUrl: './app-root.html', styleUrls: ['./app-root.scss'] }) export class AppComponent { constructor( private opentab: RedirectService, ){ } } |
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
HI, The Safari browser is not working ?
DO you have any solution, please?
I’m looking forward for this code and ill try to work on it
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.