How to Install and Use Angular 19 with a Practical Example

Introduction

Angular 19 is a powerful framework that enables developers to create dynamic, scalable web applications. In this blog post, we will guide you step-by-step through building a CRUD (Create, Read, Update, Delete) application using Angular 19, Tailwind CSS, Node.js, and Docker. This project will include a functional UI, API integration with JSONPlaceholder, modal-based item management, and deployment using Docker.

By the end of this tutorial, you will have a fully functional Angular 19 CRUD app, understand how to use Tailwind for styling, and deploy your project using Docker. Let’s get started!

Why Choose Angular 19?

Angular 19 introduces several performance improvements and features, such as:

Optimized hydration for improved rendering speed.
Standalone APIs that simplify module dependencies.
Enhanced lazy loading strategies for better app performance.

With these improvements, Angular 19 is an excellent choice for building modern web applications.

Project Setup

1. Install Node.js and Angular CLI

Before starting, ensure you have Node.js installed. You can download it from Node.js Official Website.

To install Angular CLI, run:

npm install -g @angular/cli@19

Verify the installation:

ng version

2. Create a New Angular Project

Generate a new Angular app and navigate to the project folder:

ng new angular-crud-app
cd angular-crud-app

Choose Tailwind CSS as the styling option if prompted.

3. Install Tailwind CSS

To style our Angular application, install Tailwind CSS:

npm install tailwindcss @tailwindcss/postcss postcss --force
npx tailwindcss init

Configure tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Import Tailwind styles into styles.css:

/* You can add global styles to this file, and also import other style files */
@import "tailwindcss";

We need also to remove the all the code from app.component.html and just add this


<router-outlet />

Also, we need to config our app.config.ts to enable fetch API Globally

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(withFetch()), // Enable fetch API globally
    provideClientHydration(withEventReplay())
  ]
};

Also, we need to have this file .postcssrc.json to fix the error when tailwindcss/postcss. create the file .postcssrc.json

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Start the development server:

ng serve --open

Building the CRUD Application

1. Generate Components and Services

Create an item list component and a service:

ng generate component components/item-list
ng generate service services/item

2. Implement CRUD Operations in the Service

Modify item.service.ts:

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

@Injectable({ providedIn: 'root' })
export class ItemService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

  getItems(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl);
  }

  getItem(id: number): Observable<any> {
    return this.http.get<any>(`${this.apiUrl}/${id}`);
  }

  createItem(item: any): Observable<any> {
    return this.http.post<any>(this.apiUrl, item);
  }

  updateItem(id: number, item: any): Observable<any> {
    return this.http.put<any>(`${this.apiUrl}/${id}`, item);
  }

  deleteItem(id: number): Observable<any> {
    return this.http.delete<any>(`${this.apiUrl}/${id}`);
  }
}

3. Build the UI with Tailwind and Modals

Modify item-list.component.html:

<div class="container mx-auto p-6">
  <h2 class="text-2xl font-bold mb-4">Item List</h2>
  <button (click)="openModal()" class="bg-blue-500 text-white px-3 py-1 rounded mb-4">Add Item</button>
  <ul class="list-none">
    <li *ngFor="let item of items" class="bg-gray-100 p-4 rounded-lg shadow mb-2 flex justify-between">
      <span>{{ item.title }}</span>
      <div>
        <button (click)="openModal(item)" class="bg-yellow-500 text-white px-3 py-1 rounded">Update</button>
        <button (click)="deleteItem(item.id)" class="bg-red-500 text-white px-3 py-1 rounded">Delete</button>
      </div>
    </li>
  </ul>
</div>

<!-- Modal -->
<div *ngIf="modalOpen" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
  <div class="bg-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl mb-4">{{ isEditing ? 'Edit Item' : 'Add Item' }}</h2>
    <input [(ngModel)]="selectedItem.title" class="border p-2 mb-2 w-full" placeholder="Title">
    <input [(ngModel)]="selectedItem.body" class="border p-2 mb-2 w-full" placeholder="Body">
    <button (click)="saveItem()" class="bg-green-500 text-white px-3 py-1 rounded">Save</button>
    <button (click)="modalOpen = false" class="ml-2 text-gray-500">Cancel</button>
  </div>
</div>

Item-list Component

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ItemService } from '../../services/item.service';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-item-list',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.css']
})
export class ItemListComponent implements OnInit {
  items: any[] = [];
  modalOpen = false;
  selectedItem: any = { title: '', body: '' };
  isEditing = false;

  constructor(private itemService: ItemService) {}

  ngOnInit() {
    this.loadItems();
  }

  loadItems() {
    this.itemService.getItems().subscribe(data => {
      this.items = data;
    });
  }

  openModal(item?: any) {
    this.modalOpen = true;
    if (item) {
      this.isEditing = true;
      this.selectedItem = { ...item };
    } else {
      this.isEditing = false;
      this.selectedItem = { title: '', body: '' };
    }
  }

  saveItem() {
    if (this.isEditing) {
      this.itemService.updateItem(this.selectedItem.id, this.selectedItem).subscribe(() => {
        this.loadItems();
      });
    } else {
      this.itemService.createItem(this.selectedItem).subscribe(data => {
        this.items.push(data);
      });
    }
    this.modalOpen = false;
  }

  deleteItem(id: number) {
    this.itemService.deleteItem(id).subscribe(() => {
      this.items = this.items.filter(item => item.id !== id);
    });
  }
}

Deploying with Docker

1. Create a `Dockerfile`

# Stage 1: Build the Angular app
FROM node:20.11.0-alpine AS build

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and install dependencies
COPY package.json .
RUN npm install

# Copy project files
COPY . .

# Build the Angular application
RUN npm run build --prod

# Use Nginx to serve the Angular app
FROM nginx:alpine
COPY --from=0 /app/dist/my-angular19-app /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. Build and Run the Docker Container

docker build -t angular-crud-app .
docker run -d -p 80:80 angular-crud-app

Conclusion

This guide covered setting up an Angular 19 CRUD application using Tailwind CSS, integrating a REST API, implementing a modal-based UI, and deploying the project with Docker. With these skills, you are now ready to build and deploy modern web applications.

Start coding today and bring your Angular projects to life! 🚀

LinkedIn: https://www.linkedin.com/in/starling-diaz-908225181/
GitHub: https://github.com/NSTLRD
Youtube: https://www.youtube.com/@Mentorly-e3b

blog Spring Boot technology

About Us