Angular Service Integration (Adding service into an angular app)

This project will explain to you, How to integrate the pokeman API inside the angular app and service integration

Step 1. Create an angular project with the below command.

ng new angular-service-integration

Step 2. After successful creation of an angular app, change the file directory to project-name. “cd angular-service-integration”.

Open the project in vs code using “code .” in terminal or open with vs code. Then run the project using “ng serve” in a terminal. Open project in chrome using localhost:4200.

Step 3. Open the app component in vs code and remove the content which is created by Angular CLI while creating the app.

Step 4. After that open app.module.ts and import HttpClientModule and add it to the imports array like below.

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';  
import { AppComponent } from './app.component';  
import { HttpClientModule} from '@angular/common/http';

@NgModule({  
  declarations: [  
    AppComponent  
  ],  
  imports: [  
    BrowserModule,  
    AppRoutingModule,  
    **HttpClientModule**  
  ],  
  providers: [ ],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }

Step 5. Create pokeman service to load pokeman objects under apis folder by using the below command.

ng generate service pokeman

Step 6. After that open pokeman.service.ts and import HttpClient, add it as a dependency inside the constructor.

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

@Injectable({  
  providedIn: 'root'  
})  
export class PokemanService {  
  constructor(private http:HttpClient) { }
}

Step 7. Create getAllPokemans() methods to call the pokeman api inside service file.

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

@Injectable({  
  providedIn: 'root'  
})  
export class PokemanService {

constructor(private http:HttpClient) { }

public getAllPokemans(){  
    const URL = 'https://pokeapi.co/api/v2/pokemon?limit=50';  
    return this.http.get(URL);  
  }
}

Step 8. Import pokeman service inside app.component.ts and add it as a dependency inside the constructor.

import { Component, OnInit } from '@angular/core';  
import { PokemanService } from './apis/pokeman.service';

@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: \['./app.component.scss'\]  
})  
export class AppComponent implements OnInit{  
  title = 'angular-service-integration';   
  constructor(private api: PokemanService){}

  ngOnInit(): void {}  
}

Step 9. After that create the getAllPokemans method to call pokeman service and pokemans array to store pokemans inside the app.component.ts. Also, call the getAllPokemans method from either constructor or ngOnInit. For checking the response am logging the response inside chrome dev tools.

import { Component, OnInit } from '@angular/core';  
import { PokemanService } from './apis/pokeman.service';

@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.scss']  
})  
export class AppComponent implements OnInit{  
  title = 'angular-service-integration';  
  pokemans=[ ];

constructor(private api: PokemanService){}

ngOnInit(): void {  
    this.getAllPokemans();
  }  

  getAllPokemans(){  
    this.api.getAllPokemans().subscribe((res:any)=>{  
      console.log(res.results)  
      this.pokemans =res.results;  
    },error=>{  
      console.log(error)  
    })  
  }  
}

Step 10. Run the Project by using “ng serve” and Check the console, You can able to see the response. For a better experience of view am adding the below HTML code inside app.component.html in that way you can able to see the data inside the browser window.

<div style="margin: 25px;">  
  <ng-container *ngIf="pokemans && pokemans.length>0">  
    <h3>List of Pokemans</h3>  
    <ol style="height: 400px;overflow-y:auto;">  
      <li \*ngFor="let pokeman of pokemans" style="text-decoration: none;padding: 5px;">  
        {{pokeman.name}}  
      </li>  
    </ol>  
  </ng-container>  
</div>

Output:

Thanks for reading my article, Please share your feedback, claps, and comments. In that way, it will be helped me to improve my articles in the future. Please share my story with your near and dear