angular services[get&post]

insertPost(data:any){

  return this.httpClient.post(this.url1,data

    ,

    {responseType: 'text'});

}

//rx js topic obeserver in angular?

 step 1:-

services:--(apiFetch)

AppModule.ts

//for http call:---

import { HttpClientModule } from '@angular/common/http';

imports: [

HttpClientModule,

]

step 2:--

getapi.service.ts:--

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Injectable({

  providedIn: 'root'

})

export class GetapiService {

  private url = 'http://jsonplaceholder.typicode.com/posts';

   private url1="http://localhost:4000/myapp";

   //this is post api address..

  constructor(private httpClient: HttpClient) { }

  

  getPosts(){

    return this.httpClient.get(this.url);

  }

  insertPosts(data:any){

    return this.httpClient.post(this.url1,data);

  }

}

step 3:-- In any ts file:--

import { Component, OnInit,Input } from '@angular/core';

//import {StudentdataService} from '../services/studentdata.service'

import { GetapiService } from '../services/getapi.service';

@Component({

  selector: 'app-about-us',

  templateUrl: './about-us.component.html',

  styleUrls: ['./about-us.component.css']

})

export class AboutUsComponent implements OnInit {

@Input() data1:any

// students:any

// constructor(private userData:StudentdataService) {

// this.students=userData.students();

// console.log(this.students);

//  }

posts:any;

  

  constructor(private service:GetapiService) {

    this.service.getPosts()

        .subscribe(response => {

          this.posts = response;

          console.log(this.posts);

          this.posts=this.posts.slice(0,10);

        });

  }

  

  

  ngOnInit(): void {

    

  }

}

step 4:-

In html file:--

<table >

    <tr><th>Id</th><th>Title</th><th>Body</th><th>Action</th></tr>

    <tr *ngFor="let post of posts"> 

        <td >

        {{ post.id }}

        </td>

        <td>

            {{post.title}}

        </td>

        <td>

            {{post.body}}

        </td>

        <td>

            <button>Edit</button>

            <button>Delete</button>

        </td>

    </tr>

  </table>

post api:--

html file:

<form #RegisterForm="ngForm" (ngSubmit)=getUserInfo(RegisterForm.value) >

        <div>

            <label for="username">Enter user name</label>

            <input  ngModel type="text" name="username" placeholder="Enter name">

        </div>

        <div>

            <label  for="userpwd">

                Enter password

            </label>

            <input ngModel type="password" name="userpwd" placeholder="Enter password">

        </div>

        <div>

            <button>Save</button>

        </div>

    </form>

ts file:---

import { Component } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { GetapiService } from './services/getapi.service';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  showinfo=false;

  title = 'ducat1';

  data={

    'name':'ashit',

    'address':'odisha'

  }

  data1=JSON.parse('{"name":"John", "age":30, "city":"New York"}');

  S="amit";

label:any="";

  setSession(){

   localStorage.setItem('ducat',

    JSON.stringify(this.data)

    );

  }

  getSession(){

this.label;

this.label=localStorage.getItem('ducat');

  }

  // S1=this.S.toUpperCase();

  constructor(private userdata:GetapiService){}

  getUserInfo(data:any){

    //console.log(data);

//call api for insert:--

this.userdata.insertPosts(data).subscribe((e)=>{

  //this.showinfo=true;

//redirect.....

  console.log(e)})

  }

}