Angular6Nodejs

Angular With Node

Angular 9 owl carousel with Node Js backend

Angular With Node

Hello to all, welcome to therichpost.com. In this post, I will do, Angular With Node.

I used, Angular as frontend and Node as backend. I personally like both very much. Both are in the top charts.

I want to say one thing, when I share or post new post most of peoples discourage me but I like it because with this, I improve myself.

This example will also useful to Mean Stack Developers.  I was thought that Mean Stack developers are just awesome because I did not had knowledge of it but now I can do it and this makes me very happy.

In this post, I am showing data in Angular from node js. 

 

Angular with Node

 

Here is the working and tested code, you need to follow:

 

1. Very first, we need to add to add below code into  node file:

 

const express = require('express');
const app = express();

//I create api route with custom data
app.route('/api/cats').get((req, res) => {
res.send({
Names: [{ name: 'therichpost' }, { name: 'Ajay Malhotra' }]
});
});
app.listen(8000, () => {
console.log('Server started!');
});

 

2. After add above code into your node file, you need to below command to run node code:

node yourfilename.js

After run node file, you will below output into your terminal

node_run_file

 

3. Second, we need to add below code into our angular component  app.component.ts file:

I am doing this in angular 6. I use Http api get method to get nodejs data.

import {Component} from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public name : any;
  constructor(public http: HttpClient) {
      this.http.get('http://localhost:8000/api/cats/').subscribe(data => {
      this.name = data.Names;
      console.log(this.name);

      }, error => console.error(error));
    }
}

 

4. Finally, we need to add below code into app.component.html file:

<div class="container">
<br>
  <h2>Angular with NodeJs</h2>
  <ul class="list-group" *ngFor="let post of name">
    <li class="list-group-item">{{ post.name }}</li>
  </ul>
</div>

This is done, if you have any query related to this post, do comment below or ask questions. 

After this post example, I will give working example of single page application in node and angular.

 

 

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.