Connecting Angular frontend with Express backend API

Backend
1

Hey everyone, I’m stuck trying to get my Angular app to talk to my Express backend API. I’ve got Postman working fine with JSON data, but I can’t figure out how to display it on my localhost or use the form to add new contacts.

Basically, I want my Angular app to have 4 input boxes for id, first name, last name, and email. Below that, I want to show my existing contacts from the API and any new ones added through the form. It would be awesome if clicking a contact opened a new page with more details.

Here’s a simplified version of what I’m working with:

// Express backend
const express = require('express');
const app = express();
const contacts = [];

app.get('/contacts', (req, res) => res.json(contacts));
app.post('/contacts', (req, res) => {
  contacts.push(req.body);
  res.status(201).json(req.body);
});

// Angular component
@Component({
  selector: 'app-contacts',
  template: `
    <form (ngSubmit)="addContact()">
      <input [(ngModel)]="newContact.name" placeholder="Name">
      <input [(ngModel)]="newContact.email" placeholder="Email">
      <button type="submit">Add</button>
    </form>
    <ul>
      <li *ngFor="let contact of contacts">{{contact.name}}</li>
    </ul>
  `
})
export class ContactsComponent {
  contacts = [];
  newContact = {name: '', email: ''};

  addContact() {
    // How do I send this to the backend?
  }
}

Any help would be super appreciated! I’m new to this whole stack thing.

2

To connect your Angular frontend with the Express backend, you’ll need to set up an HTTP client in Angular and create a service to handle API calls. Here’s a basic approach:

Install HttpClientModule in your Angular app.
Create a ContactService with methods for GET and POST requests.
Inject the service into your component and use it to fetch and add contacts.
Implement CORS on your Express server to allow requests from your Angular app.

In your component, you’d use the service like this:

constructor(private contactService: ContactService) {}

ngOnInit() {
this.loadContacts();
}

loadContacts() {
this.contactService.getContacts().subscribe(data => this.contacts = data);
}

addContact() {
this.contactService.addContact(this.newContact).subscribe(data => {
this.contacts.push(data);
this.newContact = { name: ‘’, email: ‘’ };
});
}

This should get you started with connecting your frontend and backend.

3

hey there! have u tried using Angular’s HttpClient? it’s super handy for API calls. maybe u could make a ContactService that handles the backend communication? i’m curious, whats ur setup for handling CORS on the Express side? also, how r u planning to style ur contact list? sounds like an exciting project!

4

yo alex, sounds like ur on the right track! have u considered using httpinterceptors? they can be a game changer for handling errors n stuff. also, dont forget to sanitize ur inputs before sending em to the backend. oh and for that contact details page, u could use angular routing with route params. good luck man!