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 Solve Problems Illegal mix of collations (latin1_swedish_ci,IMPLICIT) In Laravel - December 15, 2018
- Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018
- Create WordPress Slider Without Javascript - August 30, 2018
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