Module 3: Forms and CRUD Example (1 Hour)
● Forms (30 minutes)
○ Introduction to Angular Forms
■ Angular provides two ways to handle forms:
■ Template-driven forms: Simpler for basic forms, relies on directives in the template.
■ Reactive forms: More powerful and flexible, allows for more complex form logic, and the form structure is defined in the component class.
■ Key components of Angular forms:
■ FormControl: Tracks the value and validation status of an individual form control.
■ FormGroup: Manages a collection of FormControl instances, forming a complete form.
■ FormBuilder: A service that simplifies the creation of FormControl, FormGroup, and FormArray instances.
○ Template-driven forms
■ Import FormsModule in the module.
■ Use ngModel directive for two-way binding between form elements and component properties.
■ Angular automatically creates FormControl instances behind the scenes.
■ Validation is handled using HTML5 validation attributes and Angular directives.
○ Reactive forms
■ Import ReactiveFormsModule in the module.
■ Create FormControl and FormGroup instances in the component class.
■ Bind form controls in the template using formControlName directive.
■ More explicit and powerful validation, including custom validators.
○ Example: Reactive Form
● CRUD Example (30 minutes)
○ CRUD Operations
■ CRUD stands for Create, Read, Update, and Delete. These are the basic operations performed on data in a database or data store.
■ A CRUD example demonstrates how to implement these operations in an application, typically with a form to input data, a service to manage data, and a template to display data.
○ Example: Simple CRUD Implementation
■ We'll create a simple example of managing a list of books. This will involve:
■ A service to hold the book data and provide CRUD methods.
■ A component to display the list of books, a form to add a new book, and buttons to edit or delete books.
○ Code Outline
book.service.ts
import { Injectable } from '@angular/core';
interface Book {
id: number;
title: string;
author: string;
}
@Injectable({
providedIn: 'root'
})
export class BookService {
private books: Book[] = [
{ id: 1, title: 'The Lord of the Rings' , author: 'J.R.R.
Tolkien'} ,
},
{ id: 2, title: 'Pride and Prejudice' , author: 'Jane Austen'},
];
getBooks(): Book[] {
return this.books;
}
addBook(book: Omit<Book, 'id>;): void {
const newId = this.books.length > 0 ?
Math.max(...this.books.map(b => b.id)) + 1 : 1;
this.books.push({ id: newId, ...book });
}
updateBook(id: number, updatedBook: Omit<Book, 'id&'): void {
const index = this.books.findIndex(b => b.id === id);
if (index > -1) {
this.books[index] = { id: id, ...updatedBook };
}
}
deleteBook(id: number): void {
const index = this.books.findIndex(b => b.id === id);
if (index > -1) {
this.books.splice(index, 1);
}
}
}
Activity Question:
Now it's your turn to build something!
Objective: Create a simple Angular application to manage a list of your favorite movies.
Requirements:
1. Create a new Angular project using the Angular CLI.
2. Create a movie component to display individual movie details (title, director, genre).
3. Create a movie-list component to display a list of movies.
4. Use data binding to display movie information in the template.
5. Implement a form to add new movies to the list.
6. Implement a service to manage the movie data (add, delete).
7. (Optional) Add a feature to edit movie details.
Hints:
● Use the Angular CLI to generate components and services.
● Define an interface for the Movie data.
● Use *ngFor to iterate over the list of movies in the template.
● Use (click) to handle button clicks for adding and deleting movies.
● Use [(ngModel)] for two-way binding in the form.
● Use FormGroup and FormControl for managing the form.
● Use a service to store the movie data and provide methods to add and delete movies.
.svg)
