Can angular be used for backend ?

 Angular is especially for frontend development, we can't use angular for the backend.  In angular, we can call the backend API through HttpClient Service in angular 4+. The purpose of angular is to make the frontend part of the web as well as Mobile. 

HttpClient

The HttpClient service class is in @angular/common/http. It is used for communicating with the backend services.

Example of angular Backend Call

1. First Create App with command ng new backend click continuos with the default option 

2. To Open the app with editor vs code type in terminal code. in the same directory

3. Serve the application with ng serve -o command, Then you can see the following output in the browser 

4. In app.component.ts  create a constructor 

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

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  title = 'backend';

 

  constructor() {

   

    

  }

}

5. Add HttpClientModule in the app.module.ts

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 { }

5. In the app.component.ts constructor inject HttpClient 

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

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

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  title = 'backend';

 

  constructor(private httpClient:HttpClient) {

   

    

  }

}

6. Another step is we need backend service for calling for that We are going to use jsonplaceholder fake API provider visit https://jsonplaceholder.typicode.com/posts  for accessing this backend API

7. Now For testing purpose we console the data 

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

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

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  title = 'backend';

  url = 'https://jsonplaceholder.typicode.com/posts';

  posts: any;

  constructor(private httpClient: HttpClient) {

    this.httpClient.get(this.url).subscribe(data => console.log(data))

  }

}

Result Will be

8. Now we are going to render data in HTML for this we use the app.component.html page

for this clean the dummy text and write some text like below

<h1>Posts</h1>

9. After modifying the app.component.html file we need to modify app.component.ts file,

Here we are going to store data in posts variable.

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

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

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  title = 'backend';

  url = 'https://jsonplaceholder.typicode.com/posts';

  posts: any;

  constructor(private httpClient: HttpClient) {

    this.httpClient.get(this.url).subscribe(data => this.posts = data)

  }

}

Then you should write some code in the app.component.html file

<h1>Posts</h1>

<ul>

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

        {{post.title}}

    </li>

</ul>

The final result should be like this