1. Model Design

export class Student{
    id: number = 0;
    name: string = '';
    departmentId : number = 0;
    image: string = '';
}


2. Reactive Form Design

<form [formGroup]="studentForm" (ngSubmit)=create(studentForm.value)>

    <label for="department-name">Department: </label>
    <select name="" id="" formControlName="DepartmentId">
        <option *ngFor='let dept of departmentList' [ngValue]="dept.id">{{dept.name}}</option>
    </select>
    <br>

    <label for="first-name">Student: </label>
    <input id="first-name" type="text" formControlName="Name">

    <br>
    <label for="student-image">Student Images: </label>
    <input id="student-image" type="file" multiple formControlName="StudentImages" (change)="onMultipleImages($event)">
    <div *ngFor='let heroe of imageSrcs'>
        <img [src]="heroe" height="200"> <br />
    </div>

    <br>

    <button type="submit" [disabled]="!studentForm.valid">Save</button>
</form>

<table class="table table-bordered table-stripped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Action</th>
            <th>Image</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let heroe of studentList'>
            <td>{{heroe.name}}</td>
            <td>{{heroe.departmentId}}</td>


            <td><img src="{{url}}{{heroe.image}}" height="200"> <br /></td>
            <td>
                <a routerLink="hero/{{heroe.id}}" class="btn btn-primary btn-sm"
                    (click)="loadSelectedHero(heroe.id)">Edit</a> |
                <a routerLink="hero/{{heroe.id}}" class="btn btn-danger btn-sm"
                    (click)="deletedStudent(heroe.id)">Delete</a>
            </td>
        </tr>
    </tbody>
</table>

3.Angular Routing

const routes: Routes = [
  {path: 'dashboard', component:DashboardComponent},
  {path: 'dashboard/:Postid', component:PostdetailsComponent},
  {path: 'hero', component: HerosComponent},
  {path: 'pageNotFound', component: PageNotFoundComponent},
  {path: 'heroDetails', component: HeroDetailsComponent},
  {path: 'hero/:id', component: HerosComponent},
  {path: 'student', component: StudentComponent},
  {path: 'department', component: DepartmentComponent},
]

4. Component.ts file

  constructor(
    private studentService: StudentService,
    private departmentService: DepartmentService,
    private formBuilder: FormBuilder,
  ) { }


 
  url = "http://localhost:11739";
  studentList: any;
  departmentList: any;
  StudentMultipleImages: string[] = [];
  studentId: any;
  imageSrcs: string[] = [];


 studentForm = this.formBuilder.group({
    Id: [0],
    Name: ['', Validators.required],
    DepartmentId: [0],
    StudentImages: ['', Validators.required],
    fileSource: ['', Validators.required]
  });

  angular class declare var data : RequestMoney= {
    property here
    }

    angular list declare
    let list : RequestMoney[] = [
        {senderPhone:'dddd', receiverPhone:'sd', amount:500, chargeAmount:10, referenceNote:'fsdfs'},
        {senderPhone:'dddd', receiverPhone:'sd', amount:500, chargeAmount:10, referenceNote:'fsdfs'},
        {senderPhone:'dddd', receiverPhone:'sd', amount:500, chargeAmount:10, referenceNote:'fsdfs'},
        {senderPhone:'dddd', receiverPhone:'sd', amount:500, chargeAmount:10, referenceNote:'fsdfs'},
        {senderPhone:'dddd', receiverPhone:'sd', amount:500, chargeAmount:10, referenceNote:'fsdfs'}
    ]

    


  getDepartment() {
    this.departmentService.get()
      .subscribe(option => {
        this.departmentList = option;
      })
  }

  getStudent() {
    this.studentService.get()
      .subscribe(
        stdnts => {
          this.studentList = stdnts
        }
      )
  }


  create(std: Student) {

    console.log(this.colorForm.value);

    let id = this.studentForm.controls.Id.value;
    if (id > 0) {
      this.studentService.update(std).subscribe(option => {
        alert('Update');
        this.getStudent();
        this.studentForm.reset()
      })
    } else {

      console.log(std);

      this.studentService.create(this.studentForm.value)
        .subscribe(
          option => {
            alert('Created');
            this.getStudent();
            this.studentForm.reset();
          })
    }
  }


  deletedStudent(id: number) {
    this.studentService.Delete(id);
    this.getStudent();
    this.studentForm.reset();
  }


  loadSelectedHero(Id: number) {
    this.studentService.edit(Id).subscribe(std => {
      this.studentId = std.id;

      this.studentForm.controls['Id'].setValue(std.id);
      this.studentForm.controls['Name'].setValue(std.name);
      this.studentForm.controls['DepartmentId'].setValue(std.departmentId);
      this.studentForm.controls['Image'].setValue(std.image);

    })
  }



  imageSrc: string = '';
  ngOnInit(): void {
    this.getStudent();
    this.getDepartment();
  }

  fileChange($event: any) {
    this.studentForm.patchValue(
      $event.target.files
    )
  }


  onMultipleImages(event: any) {

    for (var i = 0; i < event.target.files.length; i++) {
      const reader = new FileReader();
      const file = event.target.files[i];
      reader.readAsDataURL(file);

      reader.onload = () => {

        this.StudentMultipleImages.push(reader.result as string);
        this.imageSrcs.push(reader.result as string)

        console.log(this.StudentMultipleImages);

        this.studentForm.patchValue({
          fileSource: this.StudentMultipleImages
        })
      }
    }
  }

onSelectedFile(event: any) {
    const reader = new FileReader();
    if (event.target.files && event.target.files.length) {
      const file = event.target.files[0];
      console.log(file);

      reader.readAsDataURL(file);

      reader.onload = () => {
        this.imageSrc = reader.result as string;

        this.studentForm.patchValue({
          fileSource: reader.result
        })
      };

    }
  }


5. Details Component


 
constructor(
private activatedRoute: ActivatedRoute, private productService: ProductService ) { } ngOnInit(): void { const id = this.activatedRoute.snapshot.paramMap.get('Postid') this.getProductDetails(id) }


5. Service

constructor(private http: HttpClient) { }

  private url= "http://localhost:11739/api/Department";

  get(): Observable<any> {
    return this.http.get(this.url);
  }

  create(data: Student): Observable<Student> {
    const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
    return this.http.post<Student>(this.url+'/Insert', data, httpOptions);
  }

  edit(id: number): Observable<Student>{
    return this.http.get<Student>(this.url+'/'+id);
  }
  update(student: any): Observable<any>{
    return this.http.post(this.url+'/UpdateStudent', student)
  }

  Delete(id: number): Observable<Student>{
    return this.http.delete<Student>(this.url+'/Delete'+id);
  }