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
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
So my short tutorial Redirect New Window Or Tab With Post Method On Angular 5, hopefully useful
The following two tabs change content below.
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)
- How To Load JSON Data From Rest API To Select2 JQuery Plugin - April 22, 2019
- How To Insert Ads In The Middle Post Blogspot Blogger - January 26, 2019
- Login Page – Tutorial CRUD Client and API Server Using JQuery And Lumen Part 2 - January 23, 2019
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.