In this article, We create a full tutorial of Angular CRUD with .NET Core API. I will show how to do it, and just follow the steps clearly. In this article we have two deferent kind of topics, first is the Angular CRUD and second is the .NET Core API.

For more updates please do Subscribe via Email:

Table Of Contents
  1. Requirements
  2. Angular CRUD
  3. – Create Angular Component
  4. – Routing
  5. – View model
  6. – HTML Component
  7. – Type-Script Component and functionality
  8. – CSS
  9. – App Module
  10. – [UI] View
  11. .NET Core API
  12. Related Topics

Requirements

  • VS Code and Microsoft Visual Studio
    • you can use VS Code both Angular and API. but in my case I use VS Code for Angular and Microsoft Visual Studio for API.
  • MSSQL for the Database.

Angular CRUD

This is the first part if the tutorial. just follow the steps clearly. In this part we assume that you have already know how to create new project in Angular. but if you don’t have idea how to create just click this link and visit so that you have an idea about it.

– Create Angular Component

To create new component, run this code in your terminal

ng generate component componentName

or

ng g c componentName

The g tag means generate and c tag means component.

For this purpose of this tutorial, I must create student page. so after running the command there is four file generated. html, CSS and two file for type-script.

– Routing

In this part, just import the student component and add into the routes.

import { StudentComponent } from './student/student.component';

const routes: Routes = [
  {path: 'student', component:StudentComponent}
  /// 
];

After the routes setup you can test it.

– View model

To create model in angular, this is my CLI command format. 

 ng g class model_name --type=model

or

 ng g class folderName/model_name --type=model

Student Model

export class Student {
  studentID : string = '';
  s_FirstName : string = '';
  s_LastName: string = '';
  s_MiddleName : string = '';
  studentLevel : number = 0;
  studentContacts : string = '';
  studentEmail : string = '';
  TDT : Date = new Date;
  UDT : Date = new Date;
}

– HTML Component

<div class="container">
    <div class="row">
        <div class="col-4">
            <div class="card-body">
                <form #basicForm="ngForm" (ngSubmit)="postStudentValidation(basicForm.value)">
                    <div class="form-group">
                        <input type="number" name="studentID" ngModel [(ngModel)]="formData.studentID" hidden required class="form-control">
                        <label>First Name</label>
                        <input type="text" name="s_FirstName" ngModel [(ngModel)]="formData.s_FirstName" required class="form-control" placeholder=" First Name">
                    </div>
                    <div class="form-group">
                        <label>Last Name</label>
                        <input type="text" name="s_LastName" ngModel [(ngModel)]="formData.s_LastName" required class="form-control" placeholder=" Last Name">
                    </div>
                    <div class="form-group">
                        <label>Middle Name</label>
                        <input type="text" name="s_MiddleName" ngModel [(ngModel)]="formData.s_MiddleName" required class="form-control" placeholder=" Middle Name">
                    </div>
                    <div class="form-group">
                        <label>Level</label>
                        <input type="number" name="studentLevel" ngModel [(ngModel)]="formData.studentLevel" required class="form-control" min="1" max="12" placeholder="Level">
                    </div>
                    <div class="form-group">
                        <label>Phone #</label>
                        <input type="text" name="studentContacts" ngModel [(ngModel)]="formData.studentContacts" required class="form-control" placeholder=" Contact Number">
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="email" name="studentEmail" ngModel [(ngModel)]="formData.studentEmail" required class="form-control" placeholder=" Email Address">
                    </div><br>
                    <div class="form-group">
                        <input type="submit" class="form-control btn-primary" value="Submit">
                    </div>
                </form>
            </div>
        </div>
        <div class=" col-8 ">
            <h2>List of Student</h2>
            <table class="table">
                <thead>
                    <tr>
                        <td>Fullname</td>
                        <td>Level</td>
                        <td>Contact#</td>
                        <td>Email</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor=" let student of studentList">
                        <td> {{ student.s_LastName }}, {{ student.s_FirstName }} {{ student.s_MiddleName }} </td>
                        <td>{{student.studentLevel}}</td>
                        <td>{{student.studentContacts}}</td>
                        <td>{{student.studentEmail}}</td>
                        <td>
                            <button class="btn btn-primary" (click)="getStudentInfo(student.studentID)" title="Edit User"><i class="fas fa-user-edit"></i></button>
                            <button class="btn btn-danger" (click)="removeStudentInfo(student.studentID)" title="Delete User"><i class="fas fa-user-minus"></i></button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Bootstrap and fa-Icon CDN

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

– Type-Script Component and functionality

Get Student List:

  getStudentList()
  {
    this.httpClient.get(this.apiURL+'Students')
                    .subscribe(res =>{
                      this.studentList = res;
                    });
  }

Add Student 

  
  addStudent(data : NgForm)
  {
      this.httpClient.post(this.apiURL+'Students', data)
                    .toPromise()
                    .then((res:any)=>
                    {
                      console.log(res);
                      this.getStudentList();
                      this.formDataReset();
                    }
                    );

  }

Update Student Details

  updateStudent(data : NgForm)
  {
      this.httpClient.put(this.apiURL+'Students/'+this.formData.studentID, data)
                      .subscribe(res=>
                        {
                          this.getStudentList();
                          this.formDataReset();
                        })

  }

Get Student Details by ID

 getStudentInfo(id : number)
  {
    var studentDetails : any;
    this.httpClient.get(this.apiURL+'Students/'+id)
                    .subscribe(res=>
                      {
                        studentDetails = res;
                        this.formData.studentID = studentDetails.studentID;
                        this.formData.s_FirstName = studentDetails.s_FirstName;
                        this.formData.s_LastName = studentDetails.s_LastName;
                        this.formData.s_MiddleName = studentDetails.s_MiddleName;
                        this.formData.studentContacts = studentDetails.studentContacts;
                        this.formData.studentEmail = studentDetails.studentEmail;
                        this.formData.studentLevel = studentDetails.studentLevel;
                      });
  }

Remove Student 

  removeStudentInfo(id: number)
  {
      this.httpClient.delete(this.apiURL+'Students/'+id)
                      .subscribe(()=>
                      {
                        console.log('Deleted');
                        this.getStudentList();
                      });
  }

Add and Update Validation

  postStudentValidation(data : NgForm)
  {
    debugger;
    if(this.formData.studentID == 0)
    {
      this.addStudent(data);
    }
    else
    {
      this.updateStudent(data);
    }

  }

Form data model reset value

  formDataReset()
  {
    this.formData.studentID = 0;
    this.formData.s_FirstName = '';
    this.formData.s_LastName = '';
    this.formData.s_MiddleName = '';
    this.formData.studentContacts = '';
    this.formData.studentLevel = 0;
    this.formData.studentEmail = '';
  }

– CSS 

.card-body {
    background: #70a0d1;
    border-radius: 5px;
}

.btn {
    margin-left: 2px;
}

– App Module

import { AppComponent } from './app.component';
import { StudentComponent } from './student/student.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [    
    StudentComponent,
     //some component
  ],
  imports: [
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    //
  ]
})

– [UI] View

GitHub link: https://github.com/JaveTLupango/AngularCRUD/tree/master

.NET Core API

In API side I made separate article for it. please refer this article below. thank you.

GitHub Link : https://github.com/JaveTLupango/StudentInfoAPI/tree/New_Branch

Related Topics

By: Jave LupangoPosted on Categories : Categories : Tags:

One Reply to “Angular CRUD with .NET Core API”

  1. Pingback: Passing data from mother component to child component in angular. - CodeLife

Leave a Reply

Your email address will not be published. Required fields are marked *