{"flag":true,"single":true,"pageTitle":"Sending a Post Request | Angular HTTP | Angular 15+","post":{"id":83,"user_id":"1","slug":"sending-a-post-request-angular-http-angular-15--xfm3","title":"Sending a Post Request | Angular HTTP | Angular 15+","body":"<p>in app.module.ts add import<\/p>\r\n<pre class=\"language-markup\"><code>import { FormsModule } from '@angular\/forms';\r\nimport {HttpClient, HttpClientModule} from '@angular\/common\/http';<\/code><\/pre>\r\n<pre class=\"language-markup\"><code> imports: [\r\n    FormsModule,\r\n    HttpClientModule\r\n  ],<\/code><\/pre>\r\n<p>2. Make view<\/p>\r\n<pre class=\"language-markup\"><code>&lt;form #myForm=\"ngForm\" class=\"mt-5\" (ngSubmit)=\"handleForm(myForm.value)\"&gt;\r\n    &lt;input type=\"email\" name=\"email\" [(ngModel)]=\"email\"&gt;\r\n    &lt;input type=\"text\" name=\"alert_preference\" [ngModel]=\"alert_category\" value=\"rat 9 bajay\"&gt;\r\n    &lt;input type=\"text\" name=\"alert_category\" ngModel value=\"all\"&gt;\r\n    &lt;button type=\"submit\"&gt;Submit&lt;\/button&gt;\r\n&lt;\/form&gt;<\/code><\/pre>\r\n<p>in component<\/p>\r\n<pre class=\"language-markup\"><code>import { HttpClient } from '@angular\/common\/http';<\/code><\/pre>\r\n<pre class=\"language-markup\"><code>export class HomeComponent {\r\n  name:any = '';\r\n  constructor(private http:HttpClient){\r\n  }\r\n\r\n  email:string='';\r\n  alert_preference:string='weekly';\r\n  alert_category:string='all';\r\n  url:string='';\r\n  handleForm(data:any){\r\n    this.url=\"domain.com\";\r\n    console.log(data);\r\n    this.http.post(this.url,data).subscribe((res)=&gt;{\r\n      console.log(res);\r\n    });\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<p><strong>SEND REQUEST WITH CUSTOM HEADERS:<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>import { HttpClient, HttpHeaders } from '@angular\/common\/http';\r\n\r\nconst headers = new HttpHeaders()\r\n    .set('Content-Type', 'text\/plain');\r\n    const options = {\r\n      headers: headers\r\n    };         \r\n    let req = this.http.post&lt;any&gt;(\"https:\/\/sample.net\", {x:\"cool\"}, options);\r\n    req.subscribe(res =&gt; {\r\n      if (res == null) {\r\n        return;\r\n      }\r\n      console.log(\"All Filters: \", res);<\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-03-29T06:01:43.000000Z","updated_at":"2023-04-10T23:49:43.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"in app.module.ts add import import { FormsModule } from '@angular\/forms'; import {HttpClient, HttpClientModule} from '@angular\/common\/http'; - Sending a Post Request | Angular HTTP | Angular 15+ (Updated: April 10, 2023) - Read more about Sending a Post Request | Angular HTTP | Angular 15+ at my programming site [SITE]","categories":[]}