Post cover image

July 6, 2024

ANGULAR 18 AND ASP.NET CORE 8.0 PROJECT DEVELOPMENT 3

In this article we are going to learn angular project development.

Ahmet Bilgic

4 min read

You can find more details in our video course here:

https://www.udemy.com/course/angular-18-and-aspnet-80-project-development-for-beginners/

None

Also, you can reach the project repository on this GitHub link:

GitHub - abilgic/AngularApplication Contribute to abilgic/AngularApplication development by creating an account on GitHub.

As we mentioned before, we created a template client-side project created in Visual Studio.

Now, we are going to make some developments in this project.

First of all, open the angularapplication.client project from the solution explorer.

None

Open the app.component.ts file from the src/app/ location.

Add these lines of codes to this file:

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

interface Product {
  id: number
  name: string;
  price: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
  public products: Product[] = [];
  public apiUrl: string = 'http://localhost:5252/api/Product';
  isShowSaveBtn = false;
  isShowUpdateBtn = false;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.getproducts();
  }
  displayStyle = "none";

  openPopup() {
    this.displayStyle = "block";
    this.isShowSaveBtn = true;
    this.isShowUpdateBtn = false;
    (document.getElementById("ProductModalLabel") as HTMLInputElement).innerHTML = "Save Product";
  }
  openPopupUpdate() {
    this.displayStyle = "block";
    this.isShowSaveBtn = false;
    this.isShowUpdateBtn = true;
    (document.getElementById("ProductModalLabel") as HTMLInputElement).innerHTML = "Update Product";
  }
  closePopup() {
    this.displayStyle = "none";
  }

  getproducts() {
    this.http.get<Product[]>(this.apiUrl).subscribe(
      (result) => {
        this.products = result;
      },
      (error) => {
        console.error(error);
      }
    );
  }
  getProduct(val: any) {
    this.isShowSaveBtn = false;
    this.isShowUpdateBtn = true;
    this.http.get<Product>(this.apiUrl + '/' + val).subscribe(
      (result) => {
        (document.getElementById("ProductId") as HTMLInputElement).value = result.id.toString();
        (document.getElementById("ProductName") as HTMLInputElement).value = result.name;
        (document.getElementById("Price") as HTMLInputElement).value = result.price.toString();
      },
      (error) => {
        console.error(error);
      }
    );
  }

  updateProduct() {
    let Product = {
      id: (document.getElementById("ProductId") as HTMLInputElement).value,
      name: (document.getElementById("ProductName") as HTMLInputElement).value,
      price: (document.getElementById("Price") as HTMLInputElement).value
    }
    return this.http.put(this.apiUrl, Product).subscribe(response => {
      if (response) {
        alert("Product is Updated");
      }
      else {
        alert("Product is not updated");
      }
    });
  }

  deleteProduct(val: any) {

    return this.http.delete(this.apiUrl + '/' + val).subscribe(response => {
      if (response) {
        alert("Product is deleted");

      }
      else {

        alert("Product is not deleted");
      }
    });
  }

  createProduct() {

    let Product = {
      name: (document.getElementById("ProductName") as HTMLInputElement).value,
      price: (document.getElementById("Price") as HTMLInputElement).value
    }

    this.http.post(this.apiUrl, Product)
      .subscribe(response => {
        if (response) {
          alert("Product is Saved");
        }
        else {
          alert("Product is not saved");
        }
      });
  }

  title = 'angularapplication.client';
}

Here, you need to update this apiUrl = 'http://localhost:5252/api/Product' according to your web API project endpoints. To learn the endpoint you can use the swagger page and make a get request and you can see the endpoint of the web API project as follows:

None

Next, add these lines of code to the app.component.html file.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<h1 id="ProductLabel" > Product List</h1>

<button style="margin: 50px; padding: 10px"
        type="button"
        class="btn btn-primary"
        (click)="openPopup()">
  Add Product
</button>
<div class="modal"
     tabindex="-1"
     role="dialog"
     [ngStyle]="{'display':displayStyle}">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="ProductModalLabel"></h4>
      </div>
      <div class="modal-body">
        <div class="mb-3 row">
          <label class="col-sm-6 col-form-label text-start"> Id</label>
          <div class="col-sm-6">
            <input type="text" class="form-control" id="ProductId" readonly="readonly">
          </div>
        </div>
        <div class="mb-3 row">
          <label class="col-sm-6 col-form-label text-start"> Product Name</label>
          <div class="col-sm-6">
            <input type="text" class="form-control" id="ProductName">
          </div>
        </div>
        <div class="mb-3 row">
          <label class="col-sm-6 col-form-label text-start">Price</label>
          <div class="col-sm-6">
            <input type="text" class="form-control" id="Price">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger"
                (click)="closePopup()">
          Close
        </button>

        <button type="button" class="btn btn-primary" id="btnSave" *ngIf="isShowSaveBtn" (click)="createProduct()">Save</button>
        <button type="button" class="btn btn-primary" id="btnUpdate" *ngIf="isShowUpdateBtn" (click)="updateProduct()">Update</button>
      </div>
    </div>
  </div>
</div>

<table *ngIf="products" class="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>Product Name</th>
      <th>Product Price</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let Product of products">
      <td>{{ Product.id }}</td>
      <td>{{ Product.name }}</td>
      <td>{{ Product.price }}</td>

      <td>
        <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#ProductModal" (click)="getProduct(Product.id);openPopupUpdate()">Update</button>
        <button type="button" class="btn btn-danger" (click)=deleteProduct(Product.id)>Delete</button>
      </td>

    </tr>
  </tbody>
</table>

Finally, we added all the necessary codes to the Angular project.

When we run the project, the output will be as seen:

None

We click on the Add Product button and the pop-up window opens. We enter product info and save it on this screen.

None

When we click the save button and then refresh the page, the product will appear on the page as seen:

None

When you click on the update button the update pop-up modal will be seen on the screen.

None

When you make some changes on the product it will update the product information as seen:

None

Next, we click on the delete button and the product will be deleted.

None

Conclusion:

In conclusion, developing a project using Angular and ASP.NET Core offers a robust, scalable, and maintainable solution for building modern web applications. This technology stack leverages the strengths of both front-end and back-end technologies, providing developers with powerful tools, community support, and flexibility to meet diverse project requirements. By effectively leveraging Angular's rich client-side features and ASP.NET Core's robust server-side capabilities, developers can deliver responsive, secure, and performant applications that align with modern web development best practices.

Thank you for reading the article.

To learn more details about Angular you can watch our Udemy course on this link:

https://www.udemy.com/course/angular-18-and-aspnet-80-project-development-for-beginners/

None