- Pre-requisite: install node and angular cli
- Create new project with this command
- ng new projectName --no-standalone //there are two types of project standalone and no-standalone
- npm install bootstrap@5.3
- Create model class:
- ng g class models/product
- Create a component class
- ng g c components/product
- Create a service class
- ng g s services/product
Project Structure:
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProductComponent } from './components/product/product.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClient, HttpClientModule, provideHttpClient, withFetch } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
ProductComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
ReactiveFormsModule
],
providers: [
provideClientHydration(),
provideHttpClient(withFetch())
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'mytask4';
}
app.component.html
<div class="container">
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a href="#" class="navbar-brand">MyTask</a>
<div class="navbar-nav mr-auto">
<li class="nav-item">
<a routerLink="product" class="nav-link">Product</a>
</li>
</div>
</nav>
<div class="container mt-3">
<router-outlet />
</div>
</div>
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductComponent } from './components/product/product.component';
const routes: Routes = [
{path:'product', component:ProductComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
module/product.ts
export class Product {
id?:any;
name?:string;
price?:any;
discount?:any;
}
product.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Product } from '../models/product';
const baseUrl = 'http://localhost:7043/api/Product';
@Injectable({
providedIn: 'root'
})
export class ProductService {
constructor(private http: HttpClient) { }
getAllProduct():Observable<Product[]>{
return this.http.get<Product[]>(baseUrl);
}
}
product.component.ts
import { Component, OnInit } from '@angular/core';
import { Product } from '../../models/product';
import { ProductService } from '../../services/product.service';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrl: './product.component.css'
})
export class ProductComponent implements OnInit{
product?: Product[];
constructor(private productService: ProductService){
}
ngOnInit(): void {
this.getAllProduct();
}
title = 'Create Product';
list:Product[]=[];
formData:Product=new Product();
saveProduct(form:NgForm) {
console.log("formDate.name", this.formData.name);
if(form.valid){
console.log("formDate.price", this.formData.price);
console.log("formDate.discount", this.formData.discount);
}
}
getAllProduct():void{
this.productService.getAllProduct().subscribe({
next:(data)=>{
this.product = data;
//console.log(data);
},
error:(e)=>console.log(e)
})
}
}
product.component.html
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#saveProduct">Create New
Product</button>
<table class="table table-striped" style="text-align: center;">
<thead>
<th>Id</th>
<th>Name</th>
<th>Price</th>
<th>Discount</th>
<th>Action</th>
</thead>
<tbody>
@for (item of product; track $index) {
<tr>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.discount}}</td>
<td>
<button type="button" class="btn btn-info">Edit</button>
<button type="button" class="btn btn-warning">Delete</button>
</td>
</tr>
}
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="saveProduct" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<form #form="ngForm" (submit)="saveProduct(form)">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{title}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="Name">Name</label>
<input class="form-control form-control-lg" placeholder="Product Name" type="text"
#name="ngModel" name="name" [(ngModel)]="formData.name" id="name" required />
</div>
<div class="mb-3">
<label for="Price">Price</label>
<input class="form-control form-control-lg" placeholder="Product Price" type="text"
#price="ngModel" name="price" [(ngModel)]="formData.price" id="price" required />
</div>
<div class="mb-3">
<label for="Discount">Discount</label>
<input class="form-control form-control-lg" placeholder="Product Name" type="text"
#discount="ngModel" name="discount" [(ngModel)]="formData.discount" id="discount" required />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button class="btn btn-success">Save</button>
</div>
</div>
</form>
</div>
</div>
No comments:
Post a Comment