angular crud
https://stackoverflow.com/questions/59590391/bootstrap-modal-is-not-shown-on-angular-8-on-click
https://www.itsolutionstuff.com/post/how-to-install-bootstrap-5-in-angular-13example.html
1:myservice:
.......................................
import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class Service2Service {
private url="http://localhost:4000/myapp";
constructor(private httpclient:HttpClient) { }
getPosts():Observable<any>{
return this.httpclient.get(this.url);
}
InsertPosts(data:any){
return this.httpclient.post(this.url,data,
{responseType:'text'});
}
//update....
updateData( username:any,userpass:any ): Observable<any> {
return this.httpclient.put(`${this.url}/${username}/${userpass}`,{responseType:'text'})
}
//....delete data..
deleteData(id: string): Observable<any> {
return this.httpclient.delete(`${this.url}/${id}`)
}
}
.......
ts file of component:---
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {FormGroup,FormControl} from '@angular/forms';
import { AppComponent } from '../app.component';
import { BlogComponent } from '../blog/blog.component';
import { Service2Service } from '../services/service2.service';
@Component({
selector: 'app-html-page',
templateUrl: './html-page.component.html',
styleUrls: ['./html-page.component.css']
})
export class HtmlPageComponent implements OnInit {
Posts$:any
id:number=0
username:any
userpass:any
display = "none";
myForm=new FormGroup({
username:new FormControl(''),
userpass:new FormControl('')
})
constructor( private service:Service2Service,private router: Router) {
this.service.getPosts().subscribe(response=>{
this.Posts$=response;
console.log(this.Posts$);
})
}
ngOnInit(): void {
}
delData(post:any){
let check=confirm("Are you sure you want to delete it?")
if(check){
alert(`del id ${post.id}`);
this.service.deleteData(`${post.id}`)
.subscribe(response => {
console.log(response);
// this.service.getPosts().subscribe(response=>{
// this.Posts$=response;
// console.log(this.Posts$);
// })
this.router.navigate([`Blog/Html`]);
})
}
}
onEdit(post:any){
this.display = "block";
// alert("edit button clicked");
this.id=post.id;
this.myForm.controls['username'].setValue(`${post.username}`)
this.myForm.controls['userpass'].setValue(`${post.userpass}`)
}
updateData(){
// alert("update button clicked");
// console.log("update button pressed"+this.myForm.value.username);
// console.log(this.myForm.value.userpass);
// let body = {
this.username=this.myForm.value.username;
this.userpass=this.myForm.value.userpass;
console.log(this.username);
console.log(this.userpass);
// }
// console.log(body);
// alert(this.id);
this.service.updateData(this.username,this.userpass)
.subscribe(response => {
console.log(response)
})
}
/*editData(post:any){
let body = {
name: post.username,
pass: post.userpass
}
alert(body);
this.service.updateData(body, `${post.id}`)
.subscribe(response => {
console.log(response)
})
}
*/
// openModal() {
// this.display = "block";
// }
onCloseHandled() {
this.display = "none";
}
}
.........
html file..................
<!-- https://www.freecodecamp.org/news/how-to-perform-crud-operations-using-angular-13/ -->
<table>
<thead>
<tr><th>UserId</th><th>username</th>
<th>userpass</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let post of Posts$">
<td>{{post.id}}</td>
<td>{{post.username}}</td>
<td>{{post.userpass}}</td>
<td>
<!-- <button
type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
(click)='onEdit(post)'
>Edit</button> -->
<button type="button" class="btn btn-info btn-lg" (click)="onEdit(post)">Edit</button>
<button class="btn btn-primary" (click)='delData(post)'>Delete</button>
</td>
</tr>
</tbody>
</table>
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button> -->
<!-- Modal -->
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':display}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Model Title</h4>
<button type="button" class=" btn-close" aria-label="Close" (click)="onCloseHandled()"></button>
</div>
<div class="modal-body">
<form [formGroup]="myForm"
>
<div class="mb-3">
<label for="username" class="form-label">username</label>
<input type="text" class="form-control" placeholder="Enter Name"
formControlName="username">
</div>
<div class="mb-3">
<label for="userpass" class="form-label">userpass</label>
<input type="password" class="form-control" id="exampleFormControlInput1" placeholder="Enter Name"
formControlName="userpass">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
(click)="updateData()"
>Update</button>
<button type="button" class="btn btn-default" (click)="onCloseHandled()" >Close</button>
</div>
</div>
</div>
</div>
Comments
Post a Comment