<aside> 💡

Mind map : Angular

</aside>

Forms :

1. Template Driven Form :

Reactive Form

npx json-server db.json

Configuration CRUD :

CRUD Operation :

movie-add.component.ts

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { MovieService } from 'src/app/movie.service';

@Component({
  selector: 'app-movie-add',
  templateUrl: './movie-add.component.html',
  styleUrls: ['./movie-add.component.css']
})
export class MovieAddComponent {

  movieForm: FormGroup;  
  movies: any[] = [];

  constructor(private fb: FormBuilder, private movieService: MovieService, private router: Router ) {
    
    this.movieForm = this.fb.group({
	    id: ["", Validators.required]  // id nhi bhi mention ho phir bhi likh kr try krna 
      title: ["", Validators.required],
      director: ["", Validators.required],
      director: ["", [Validators.required, Validators.email]],
      year: ["", [Validators.required, Validators.min(1900), Validators.max(2025)]],
	    counter: [0, Validators.required ]
    })    
  }

  addMovie(): void {   
      console.log("Movies Length : ", this.movies.length);    

      const newMovie = {
          ...this.movieForm.value
      };

      // ADD MOVIE LOGIC IS HERE
        // dynamic form data coming from client
        // this.movieService.addMovie(this.movieForm.value).subscribe(() => {
        this.movieService.addMovie(newMovie).subscribe(() => {
          this.router.navigate(['/']);
        })    
  }

}

EDIT :

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { MovieService } from 'src/app/movie.service';

@Component({
  selector: 'app-edit-movie',
  templateUrl: './edit-movie.component.html',
  styleUrls: ['./edit-movie.component.css']
})

export class EditMovieComponent implements OnInit {
  
  movieForm : FormGroup;  
  movieId : any;

  constructor( 
    private fb : FormBuilder,
    private movieService: MovieService, 
    private route : ActivatedRoute,
    private router : Router
  ){

    this.movieForm = this.fb.group({
      title: ['', Validators.required],
      director: ['', Validators.required],
      year: [null, [Validators.required, Validators.min(1900), Validators.max(new
      Date().getFullYear())]]
    })

  }

  ngOnInit(): void {
    this.movieId = this.route.snapshot.paramMap.get('id')!;

    this.movieService.getMovie(this.movieId).subscribe(movie=> {
      this.movieForm.patchValue(movie);
    })
  }

  updateMovieBtn(): void {
   const updatedMovie = { ...this.movieForm.value, id: this.movieId };
    this.movieService.updateMovie(updatedMovie).subscribe(() => {             
        // this.router.navigate(['/']);
        this.router.navigateByUrl('/');
      })
    }
    
  }

}

movie-add.component.html

create a reactive form or template form as you learned earlier.

SEARCHING : 🔍

movie-list.component.ts

export class MovieListComponent implements OnInit{

  movies: Movie[] = [];
  searchTxt: string = "";
  filteredMovies: Movie[] = [];

  filterMovies(): void {
    
    if(this.searchTxt){
      this.filteredMovies = this.movies.filter((m) => {
        return m.title.toLowerCase().includes(this.searchTxt.toLowerCase()) 
        || m.director.toLowerCase().includes(this.searchTxt.toLowerCase() );
      })
    } else{
      this.filteredMovies = [...this.movies];
    }

    console.log("inp search is ..." + this.searchTxt);  
    console.log(this.filteredMovies);

  }

movie-list.component.html

  <div class="searchBox">
    <h2>Movies</h2>
    
    <input type="text" [(ngModel)]="searchTxt" (input)="filterMovies()" placeholder="search" >
  </div>

SORTING ⬆️📚⬇️ :

.ts file

 onSort () {
    this.rooms.sort((a, b) => {
      return a.name.localeCompare(b.name)
    })
  }

  onChangeSort (event: any) {
    const value = (event.target as HTMLInputElement).value
    console.log('Sort by:', value)

    this.rooms.sort((a, b) => {
      if (a[value] < b[value]) return -1
      if (a[value] > b[value]) return 1
      return 0 // for equal values
    })
  }

.html

<button class="btn btn-primary mx-2" (click)="onSort()">Sort</button>

    <div class="">
      <label for="">Sort</label>
      <select name="" (change)="onChangeSort($event)" id="">
        <option value=""></option>
        <option value="id">ID</option>
        <option value="name">Name</option>
        <option value="floor">Floor</option>
        <option value="capacity">Capacity</option>
        <option value="lastInspection">Last Inspection</option>
      </select>
    </div>

Custom Pipes :

filter.pipe.ts

• old

// filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

 transform(items: any[], searchTerm: string): any[] {
   
    if(searchTerm == "")
      return items;

    const normalizedSearchTerm  = searchTerm.trim().toLowerCase();      
    return items.filter((item) => {
      return item.name.toLowerCase().includes(normalizedSearchTerm);
    } )
 }
}

course-list.component.html

<div>
    <input type="text" id="searchTerm" [(ngModel)]="searchTerm">
    <div>
		    // // filtered course (fc) i.e, array
        <div *ngFor="let course of fc | filter : searchTerm">
            <h3>{{course.title}}</h3>
            <p>{{course.instructor}}</p>
            <p>{{course.description}}</p>
            <p><strong>Duration:</strong>{{course.duration}} hours</p>
            <p><strong>Rating:</strong>{{ course.userRating}}</p>
        </div>
    </div>
</div>

or you can use in ts file :

course-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Course } from '../models/course';
import { CourseService } from '../services/course.service';
import { FilterPipe } from '../services/filterPipe';
 
@Component({
  selector: 'app-course-list',
  templateUrl: './course-list.component.html'
})
export class CourseListComponent implements OnInit {
  courses:Course[];
  searchTerm:string='';
  fcourses:Course[];
 
  constructor(private fp:FilterPipe, Private courseService:CourseService){}
   
  getfilteredCourses():Course[]{
    this.courses = this.fp.transform(this.courses, this.searchTerm);
    return this.courses;
  }
   
}