.Netcore Api + angular 6 + EFCore Project Part - 3

Open vs code
1).Open integrated terminal (Ctrl  + `)
2). CD D:\
3). ng new DntApp

Note :- This Will Create DntApp With Required Packages ,Libraries And Files

4).cd \src\app

==============================================================
=========================== Environment.ts=======================
==============================================================

export const environment = {
  production: false,
  //Set Api Url Over Here
  apiUrl: 'https://localhost:44343/api/'
};

==============================================================
=========================== Model.ts=======================
==============================================================
Add a folder in app folder and add a file Model.ts
export class Product {
Productid: number = 0;
Name: string = '';
Quantity: number = 0;
Price: number = 0;
}

==============================================================
======================5).Add AppRoutingModule===================
==============================================================

ng generate module app-routing --flat --module=app

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
// ng generate module app-routing --flat --module=app
@NgModule({
exports: [ RouterModule ]
})
export class AppRoutingModule {}
==============================================================
=================6).Add Accout Module  To App Folder================
==============================================================
ng generate module account

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegisterComponent } from './register/register.component';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';

const routes: Routes = [
// path ='' => use to render the Default Component at page load.
{ path: '', component: RegisterComponent },
{ path: 'register', component: RegisterComponent }
];

@NgModule({
imports: [ CommonModule, FormsModule, RouterModule.forRoot(routes)],
declarations: [ RegisterComponent]
})

export class AccountModule { }

==============================================================
=========================7).register.component.ts===================
==============================================================

1).Create  register in account module.
CD: D:\DntApp\Src\App\Accout  ng g c register -s --spec false

import { Component, OnInit } from '@angular/core';
import { TestService } from 'src/app/Services/test.service';
import { Product } from 'src/app/Models/Model';

@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styles: [],
providers: [TestService]
})

export class RegisterComponent implements OnInit {
data: any;
title = 'Simple CRUD';
public TableData: any;
public product = new Product;
public obj = new Product;
public divTableShow;
constructor(private testService: TestService) {
this.product = new Product();
this.divTableShow = true;
}

ngOnInit() {
this.fnGetData();
}

fnGetData() {
this.testService.getData().pipe().subscribe(data => {
this.TableData = data;
console.log(this.data);
});
}

fnAdd() {
this.product = new Product;
this.divTableShow = false;
}

fnClose() {
this.divTableShow = true;
}

fnSave() {
if (this.product.Productid === 0) {
this.testService.postData(this.product).pipe().subscribe(data => {
console.log(this.data);
this.fnGetData();
alert('Record inserted successfully.');
});
} else {
this.testService.putData(this.product).pipe().subscribe(data => {
console.log(this.data);
this.divTableShow = true;
this.fnGetData();
alert('Record updated successfully.');
});
}
this.divTableShow = true;
}

fnEdit(editObj: any) {
this.product.Productid = editObj.productid;
this.product.Name = editObj.name;
this.product.Quantity = editObj.quantity;
this.product.Price = editObj.price;
this.divTableShow = false;
}

fnDelete(id: number) {
if (confirm('Are you sure to delete?')) {
this.testService.deleteData(id).pipe().subscribe(data => {
console.log(this.data);
alert('Record deleted successfully.');
this.fnGetData();
});
}
}
}

==============================================================
=========================7).register.component.html===================
==============================================================
<div class="row" [hidden]="divTableShow">
  <div class="container">
    <input class="form-group input-sm" type="hidden" [(ngModel)]="product.Productid">
    <div class="form-group col-lg-9">
      <div class="col-lg-3"><label for="Name">Product Name</label></div>
      <div class="col-lg-6"><input id="Name" class="col-lg-9" type="text" [(ngModel)]="product.Name"></div>
    </div>
    <div class="form-group col-lg-9">
      <div class="col-lg-3"><label for="Qty">Qty</label></div>
      <div class="col-lg-6"><input id="Qty" class="col-lg-9" type="text" [(ngModel)]="product.Quantity"></div>
    </div>
    <div class="form-group col-lg-9">
      <div class="col-lg-3"><label for="Price">Price</label></div>
      <div class="col-lg-6"><input id="Price" class="col-lg-9" type="text" [(ngModel)]="product.Price"></div>
    </div>
    <div class="form-group col-lg-12">
      <button class="btn btn-danger" (click)="fnClose()">Cancel</button> &nbsp;&nbsp;&nbsp;
      <button class="btn btn-success" (click)="fnSave()">Save</button>
    </div>
  </div>
</div>



<div class="row">
  <div class="container">
    <div [hidden]="!divTableShow" class="container">
      <i class="btn btn-info fa fa-plus" (click)="fnAdd()"></i>
      <table class="table table hover">
        <thead>
          <tr>
            <th>Name</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let obj of TableData">
            <td>{{obj.name}}</td>
            <td>{{obj.quantity}}</td>
            <td>{{obj.price}}</td>
            <td>
              <i class="btn btn-info fa fa-pencil" (click)="fnEdit(obj)"></i> &nbsp;&nbsp;
              <i class="btn btn-danger fa fa-trash" (click)="fnDelete(obj.productid)"></i>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
==============================================================
============================7).TestService =======================
==============================================================

1).Add A service Folder to app
CD:  D:\DntApp\Src\App\Service ng generate service Test
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { Product } from '../Models/Model';

@Injectable({providedIn: 'root'})

export class TestService {
constructor(private httpClient: HttpClient) {
}

getData() {
return this.httpClient.get( environment.apiUrl + 'Values');
}

postData(obj: Product) {
return this.httpClient.post( environment.apiUrl + 'Values', obj);
}

putData(obj: Product) {
return this.httpClient.put( environment.apiUrl + 'Values/', obj);
}

deleteData(id: number) {
return this.httpClient.delete( environment.apiUrl + 'Values/?Productid=' + id );
}
}

==============================================================
============================App.Module ========================
//Notes :
//1).This FormsModule need to import In Respective Module.ts
//        For (2-way binding) using [(ngModel)] In Component.html
//        If are having child module in app folder than we have to
//        Import FormsModule sepratly in that module.
//2).For All Component of app folder we need to import it in app.module.ts
==============================================================

import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TestService } from './Services/test.service';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AccountModule } from './account/account.module';

@NgModule({
declarations: [
AppComponent,
],

imports: [
AccountModule,
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule
],

providers: [TestService],
bootstrap: [AppComponent]
})

export class AppModule { }

===============================================================
============================App.Component.html===================
===============================================================
<router-outlet></router-outlet>
<a [routerLink]="['register']">Register</a>
===============================================================
=============================Index.html==========================
===============================================================
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DntApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <app-root></app-root>
</body>
</html>

==============================================================

Now All Is Done build the Project Fire
ng serve --o command in terminal