How to pass parameter from simple html page to another angular page using form post method?

Question

this is my simple test.html file and i wanted to pass employeeId to localhost:4200/homePage. When i use get method then it working fine but with post getting error Cannot Post

<form action="localhost:4200/homePage" name="goToAngular" method="post">
<input type="text" name="employeeID" value="" id="apiUrl" id="employeeID"/>
<input type="submit" value="go"/>
</form>

On the homePage-component.ts file i am using this code--

this.route.queryParams.subscribe((params: Params) => 
this.empID = params['employeeID'];
}

you cant use POST to send params, its not working like this on Angular. you have other ways to do it. you can use Services/ngrx and so many other ways(even with cookie\session what ever) — Talg123
– Talg123, Commented Oct 30, 2018 at 8:23

Sarthak Aggarwal · Accepted Answer · 2018-10-30 08:27:24Z

1

Basically you want to send data from page1 component to page2 component and route to that component in Angular on submit of the form.

You should make use of (ngSubmit) directive available by Angular

Try making following changes :

page1.component.html

<form (ngSubmit)="formSubmit()">
<input type="text" name="employeeID" value="" id="apiUrl" id="employeeID" [(ngModel)]="empId" />
<button type="submit">Submit</button>
</form>

page1.component.ts

empId = "";

constructor(private router : Router) {} 

formSubmit(){
  this.router.navigate(['/home',{queryParameter : {employeeId : this.empId}}])
}

home.component.html

<div>{{employeeId}}</div>

home.component.ts

employeeId : String

constructor(private route : ActivatedRoute) {} 

ngOnInit(){
 this.route.queryParamters.subscribe(data=>{
   this.employeeId = data['employeeId']
 })
}

You will also need to define routes in your application. Check out official docs for more info.

answered Oct 30, 2018 at 8:27

Sarthak Aggarwal

2,3121 gold badge10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anil Khatour Over a year ago

Thanks for your answer,

Anil Khatour Over a year ago

Is it mandatory to use angular for both end ? I mean 1st end i have a html file in which i can angular js but at other end i am using angular 6. so i cann't have test.component.ts file at 1st end

Collectives™ on Stack Overflow

How to pass parameter from simple html page to another angular page using form post method?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related