-
-
-
Resources
Here are some links to help you get started:
-Next Steps
What do you want to do next with your app?
- +
-
-
+
+
New Component
-
-
+
+
Angular Material
-
+
Add PWA Support
-
-
+ ;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ AddStudentComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AddStudentComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/add-student/add-student.component.ts b/src/app/components/add-student/add-student.component.ts
new file mode 100644
index 0000000..e505ff0
--- /dev/null
+++ b/src/app/components/add-student/add-student.component.ts
@@ -0,0 +1,95 @@
+import { Router } from '@angular/router';
+import { Component, OnInit, ViewChild, NgZone } from '@angular/core';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { MatChipInputEvent } from '@angular/material/chips';
+import { ApiService } from './../../shared/api.service';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+export interface Subject {
+ name: string;
+}
+
+@Component({
+ selector: 'app-add-student',
+ templateUrl: './add-student.component.html',
+ styleUrls: ['./add-student.component.css'],
+})
+export class AddStudentComponent implements OnInit {
+ visible = true;
+ selectable = true;
+ removable = true;
+ addOnBlur = true;
+ @ViewChild('chipList') chipList;
+ @ViewChild('resetStudentForm') myNgForm;
+ readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+ studentForm: FormGroup;
+ subjectArray: Subject[] = [];
+ SectioinArray: any = ['A', 'B', 'C', 'D', 'E'];
+
+ ngOnInit() {
+ this.submitBookForm();
+ }
+
+ constructor(
+ public fb: FormBuilder,
+ private router: Router,
+ private ngZone: NgZone,
+ private studentApi: ApiService
+ ) {}
+
+ /* Reactive book form */
+ submitBookForm() {
+ this.studentForm = this.fb.group({
+ student_name: ['', [Validators.required]],
+ student_email: ['', [Validators.required]],
+ section: ['', [Validators.required]],
+ subjects: [this.subjectArray],
+ dob: ['', [Validators.required]],
+ gender: ['Male'],
+ });
+ }
+
+ /* Add dynamic languages */
+ add(event: MatChipInputEvent): void {
+ const input = event.input;
+ const value = event.value;
+ // Add language
+ if ((value || '').trim() && this.subjectArray.length < 5) {
+ this.subjectArray.push({ name: value.trim() });
+ }
+ // Reset the input value
+ if (input) {
+ input.value = '';
+ }
+ }
+
+ /* Remove dynamic languages */
+ remove(subject: Subject): void {
+ const index = this.subjectArray.indexOf(subject);
+ if (index >= 0) {
+ this.subjectArray.splice(index, 1);
+ }
+ }
+
+ /* Date */
+ formatDate(e) {
+ var convertDate = new Date(e.target.value).toISOString().substring(0, 10);
+ this.studentForm.get('dob').setValue(convertDate, {
+ onlyself: true,
+ });
+ }
+
+ /* Get errors */
+ public handleError = (controlName: string, errorName: string) => {
+ return this.studentForm.controls[controlName].hasError(errorName);
+ };
+
+ /* Submit book */
+ submitStudentForm() {
+ if (this.studentForm.valid) {
+ this.studentApi.AddStudent(this.studentForm.value).subscribe((res) => {
+ this.ngZone.run(() => this.router.navigateByUrl('/students-list'));
+ });
+ }
+ }
+}
diff --git a/src/app/components/edit-student/edit-student.component.css b/src/app/components/edit-student/edit-student.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/edit-student/edit-student.component.html b/src/app/components/edit-student/edit-student.component.html
new file mode 100644
index 0000000..c836174
--- /dev/null
+++ b/src/app/components/edit-student/edit-student.component.html
@@ -0,0 +1,134 @@
+;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ EditStudentComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(EditStudentComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/edit-student/edit-student.component.ts b/src/app/components/edit-student/edit-student.component.ts
new file mode 100644
index 0000000..333fccb
--- /dev/null
+++ b/src/app/components/edit-student/edit-student.component.ts
@@ -0,0 +1,114 @@
+import { Router, ActivatedRoute } from '@angular/router';
+import { Component, OnInit, ViewChild, NgZone } from '@angular/core';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { MatChipInputEvent } from '@angular/material/chips';
+import { ApiService } from './../../shared/api.service';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+export interface Subject {
+ name: string;
+}
+
+@Component({
+ selector: 'app-edit-student',
+ templateUrl: './edit-student.component.html',
+ styleUrls: ['./edit-student.component.css'],
+})
+export class EditStudentComponent implements OnInit {
+ visible = true;
+ selectable = true;
+ removable = true;
+ addOnBlur = true;
+ @ViewChild('chipList') chipList;
+ @ViewChild('resetStudentForm') myNgForm;
+ readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+ studentForm: FormGroup;
+ subjectArray: Subject[] = [];
+ SectioinArray: any = ['A', 'B', 'C', 'D', 'E'];
+
+ ngOnInit() {
+ this.updateBookForm();
+ }
+
+ constructor(
+ public fb: FormBuilder,
+ private router: Router,
+ private ngZone: NgZone,
+ private actRoute: ActivatedRoute,
+ private studentApi: ApiService
+ ) {
+ var id = this.actRoute.snapshot.paramMap.get('id');
+ this.studentApi.GetStudent(id).subscribe((data) => {
+ console.log(data.subjects);
+ this.subjectArray = data.subjects;
+ this.studentForm = this.fb.group({
+ student_name: [data.student_name, [Validators.required]],
+ student_email: [data.student_email, [Validators.required]],
+ section: [data.section, [Validators.required]],
+ subjects: [data.subjects],
+ dob: [data.dob, [Validators.required]],
+ gender: [data.gender],
+ });
+ });
+ }
+
+ /* Reactive book form */
+ updateBookForm() {
+ this.studentForm = this.fb.group({
+ student_name: ['', [Validators.required]],
+ student_email: ['', [Validators.required]],
+ section: ['', [Validators.required]],
+ subjects: [this.subjectArray],
+ dob: ['', [Validators.required]],
+ gender: ['Male'],
+ });
+ }
+
+ /* Add dynamic languages */
+ add(event: MatChipInputEvent): void {
+ const input = event.input;
+ const value = event.value;
+ // Add language
+ if ((value || '').trim() && this.subjectArray.length < 5) {
+ this.subjectArray.push({ name: value.trim() });
+ }
+ // Reset the input value
+ if (input) {
+ input.value = '';
+ }
+ }
+
+ /* Remove dynamic languages */
+ remove(subject: Subject): void {
+ const index = this.subjectArray.indexOf(subject);
+ if (index >= 0) {
+ this.subjectArray.splice(index, 1);
+ }
+ }
+
+ /* Date */
+ formatDate(e) {
+ var convertDate = new Date(e.target.value).toISOString().substring(0, 10);
+ this.studentForm.get('dob').setValue(convertDate, {
+ onlyself: true,
+ });
+ }
+
+ /* Get errors */
+ public handleError = (controlName: string, errorName: string) => {
+ return this.studentForm.controls[controlName].hasError(errorName);
+ };
+
+ /* Update book */
+ updateStudentForm() {
+ console.log(this.studentForm.value);
+ var id = this.actRoute.snapshot.paramMap.get('id');
+ if (window.confirm('Are you sure you want to update?')) {
+ this.studentApi
+ .UpdateStudent(id, this.studentForm.value)
+ .subscribe((res) => {
+ this.ngZone.run(() => this.router.navigateByUrl('/students-list'));
+ });
+ }
+ }
+}
diff --git a/src/app/components/students-list/students-list.component.css b/src/app/components/students-list/students-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/students-list/students-list.component.html b/src/app/components/students-list/students-list.component.html
new file mode 100644
index 0000000..e6432ec
--- /dev/null
+++ b/src/app/components/students-list/students-list.component.html
@@ -0,0 +1,64 @@
+
+;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ StudentsListComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(StudentsListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/students-list/students-list.component.ts b/src/app/components/students-list/students-list.component.ts
new file mode 100644
index 0000000..9f69c1d
--- /dev/null
+++ b/src/app/components/students-list/students-list.component.ts
@@ -0,0 +1,47 @@
+import { Student } from './../../shared/student';
+import { ApiService } from './../../shared/api.service';
+import { Component, ViewChild, OnInit } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+
+@Component({
+ selector: 'app-students-list',
+ templateUrl: './students-list.component.html',
+ styleUrls: ['./students-list.component.css'],
+})
+export class StudentsListComponent implements OnInit {
+ StudentData: any = [];
+ dataSource: MatTableDataSource;
+ @ViewChild(MatPaginator) paginator: MatPaginator;
+ displayedColumns: string[] = [
+ '_id',
+ 'student_name',
+ 'student_email',
+ 'section',
+ 'action',
+ ];
+
+ constructor(private studentApi: ApiService) {
+ this.studentApi.GetStudents().subscribe((data) => {
+ this.StudentData = data;
+ this.dataSource = new MatTableDataSource(this.StudentData);
+ setTimeout(() => {
+ this.dataSource.paginator = this.paginator;
+ }, 0);
+ });
+ }
+
+ ngOnInit() {}
+
+ deleteStudent(index: number, e) {
+ if (window.confirm('Are you sure')) {
+ const data = this.dataSource.data;
+ data.splice(
+ this.paginator.pageIndex * this.paginator.pageSize + index,
+ 1
+ );
+ this.dataSource.data = data;
+ this.studentApi.DeleteStudent(e._id).subscribe();
+ }
+ }
+}
diff --git a/src/app/material.module.ts b/src/app/material.module.ts
new file mode 100644
index 0000000..f4c5472
--- /dev/null
+++ b/src/app/material.module.ts
@@ -0,0 +1,59 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ MatButtonModule,
+ MatToolbarModule,
+ MatIconModule,
+ MatSidenavModule,
+ MatListModule,
+ MatGridListModule,
+ MatFormFieldModule,
+ MatInputModule,
+ MatSelectModule,
+ MatRadioModule,
+ MatDatepickerModule,
+ MatChipsModule,
+ MatTooltipModule,
+ MatTableModule,
+ MatPaginatorModule,
+ ],
+ exports: [
+ MatButtonModule,
+ MatToolbarModule,
+ MatIconModule,
+ MatSidenavModule,
+ MatListModule,
+ MatGridListModule,
+ MatInputModule,
+ MatFormFieldModule,
+ MatSelectModule,
+ MatRadioModule,
+ MatDatepickerModule,
+ MatChipsModule,
+ MatTooltipModule,
+ MatTableModule,
+ MatPaginatorModule,
+ ],
+ providers: [MatDatepickerModule],
+})
+export class AngularMaterialModule {}
diff --git a/src/app/shared/api.service.spec.ts b/src/app/shared/api.service.spec.ts
new file mode 100644
index 0000000..c0310ae
--- /dev/null
+++ b/src/app/shared/api.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiService } from './api.service';
+
+describe('ApiService', () => {
+ let service: ApiService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(ApiService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/api.service.ts b/src/app/shared/api.service.ts
new file mode 100644
index 0000000..be10231
--- /dev/null
+++ b/src/app/shared/api.service.ts
@@ -0,0 +1,69 @@
+import { Injectable } from '@angular/core';
+import { Student } from './student';
+import { Observable, throwError } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import {
+ HttpClient,
+ HttpHeaders,
+ HttpErrorResponse,
+} from '@angular/common/http';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class ApiService {
+ endpoint: string = 'http://localhost:8000/api';
+ headers = new HttpHeaders().set('Content-Type', 'application/json');
+
+ constructor(private http: HttpClient) {}
+
+ // Add student
+ AddStudent(data: Student): Observable {
+ let API_URL = `${this.endpoint}/add-student`;
+ return this.http.post(API_URL, data).pipe(catchError(this.errorMgmt));
+ }
+
+ // Get all students
+ GetStudents() {
+ return this.http.get(`${this.endpoint}`);
+ }
+
+ // Get student
+ GetStudent(id): Observable {
+ let API_URL = `${this.endpoint}/read-student/${id}`;
+ return this.http.get(API_URL, { headers: this.headers }).pipe(
+ map((res: Response) => {
+ return res || {};
+ }),
+ catchError(this.errorMgmt)
+ );
+ }
+
+ // Update student
+ UpdateStudent(id, data): Observable {
+ let API_URL = `${this.endpoint}/update-student/${id}`;
+ return this.http
+ .put(API_URL, data, { headers: this.headers })
+ .pipe(catchError(this.errorMgmt));
+ }
+
+ // Delete student
+ DeleteStudent(id): Observable {
+ var API_URL = `${this.endpoint}/delete-student/${id}`;
+ return this.http.delete(API_URL).pipe(catchError(this.errorMgmt));
+ }
+
+ // Error handling
+ errorMgmt(error: HttpErrorResponse) {
+ let errorMessage = '';
+ if (error.error instanceof ErrorEvent) {
+ // Get client-side error
+ errorMessage = error.error.message;
+ } else {
+ // Get server-side error
+ errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+ }
+ console.log(errorMessage);
+ return throwError(errorMessage);
+ }
+}
diff --git a/src/app/shared/student.ts b/src/app/shared/student.ts
new file mode 100644
index 0000000..8cf6870
--- /dev/null
+++ b/src/app/shared/student.ts
@@ -0,0 +1,9 @@
+export class Student {
+ _id: String;
+ student_name: String;
+ student_email: String;
+ section: String;
+ subjects: Array;
+ dob: Date;
+ gender: String;
+}
diff --git a/src/index.html b/src/index.html
index 400de17..3d992be 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,8 +6,10 @@
+
Add Dependency
-
-
+
-
-
-
-
-
-
-
-
-
-
-
+
Run and Watch Tests
-
-
+
-
+
Build for Production
-
-
ng generate component xyz-
ng add @angular/material-
ng add @angular/pwa-
ng add _____-
ng test-
ng build --prod+
ng generate component xyz+
ng add @angular/material+
ng add @angular/pwa+
ng add _____+
ng test+
ng build --prod
-
-
-
-
+
+
+
+Add Student
+
+
+
diff --git a/src/app/components/add-student/add-student.component.spec.ts b/src/app/components/add-student/add-student.component.spec.ts
new file mode 100644
index 0000000..08ddca0
--- /dev/null
+++ b/src/app/components/add-student/add-student.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddStudentComponent } from './add-student.component';
+
+describe('AddStudentComponent', () => {
+ let component: AddStudentComponent;
+ let fixture: ComponentFixtureedit-student works!
+ +
+
+
+
+Add Student
+
+
+
diff --git a/src/app/components/edit-student/edit-student.component.spec.ts b/src/app/components/edit-student/edit-student.component.spec.ts
new file mode 100644
index 0000000..3969dd3
--- /dev/null
+++ b/src/app/components/edit-student/edit-student.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditStudentComponent } from './edit-student.component';
+
+describe('EditStudentComponent', () => {
+ let component: EditStudentComponent;
+ let fixture: ComponentFixture
+
+
+Students List
++ There is no student added yet! +
+ +
+
diff --git a/src/app/components/students-list/students-list.component.spec.ts b/src/app/components/students-list/students-list.component.spec.ts
new file mode 100644
index 0000000..bc7d72d
--- /dev/null
+++ b/src/app/components/students-list/students-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StudentsListComponent } from './students-list.component';
+
+describe('StudentsListComponent', () => {
+ let component: StudentsListComponent;
+ let fixture: ComponentFixture
+
+
+
+
+| Student ID | +{{ element._id }} | +Student Name | +{{ element.student_name }} | +{{ element.student_email }} | +Section | +{{ element.section }} | +Action | ++ + + | +
|---|