Context: Trying to build a CRUD app that reads a file from a given input field and then populates a list.
What I've done so far:
-service(products.service.ts):
@Injectable({
providedIn: 'root'
})
export class ProductService {
constructor(private http : HttpClient) { }
private productsUrl= 'api/products';
private handleError<T>(operation ='operation', result?: T){
return (error: any): Observable<T> =>{
console.log(error,'Operation : ${operation}');
return of (result as T);
}
}
updateProduct(product: Product): Observable<any>{
return this.http.put(this.productsUrl,product,httpOptions)
.pipe(
tap(_ => console.log(`Updated product of id ${product.id}!`)),
catchError(this.handleError<any>('updateProduct'))
)
}
addProduct(product: Product): Observable<Product> {
return this.http.post<Product>(this.productsUrl, product, httpOptions).pipe(
tap((product: Product) => console.log(`Added product with id ${product.id}!`)),
catchError(this.handleError<Product>('addProduct'))
);
}
(....)
}
I used in-memory-service-web-api to simulate a web api that has been used in my products.service.ts
Next up,comes the class that uses this service:
@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
products : Product[] ;
selectedProduct : Product;
constructor(private productService : ProductService) { }
onSelectProduct(product){
this.selectedProduct = product;
this.productService.getProduct(2)
.subscribe(product =>console.log(product));
}
ngOnInit() {
this.getProducts();
}
save(product): void {
this.productService.updateProduct(product)
.subscribe(()=>console.log('Product saved!'))
}
add(name : string, price: number) : void {
this.productService.addProduct({name,price} as Product)
.subscribe(product =>{
this.products.push(product);
});
}
(...)
}
Also ,the template associated with that class:
(...)
<ul>
<li
class="product"
[class.selected]="selectedProduct && selectedProduct.name === product.name"
*ngFor="let product of products"
>
<input type="text" pInputText [(ngModel)]="product.name"/>
<div (click)="onSelectProduct(product)">Name : {{product.name }}</div>
<div>ID : {{product.id }}</div>
<div>Price : {{product.price }}</div>
<button (click)="save(product)" pButton type="button" label="Save" class="ui-button-success"></button>
<button (click)="delete(product.id)" pButton type="button" label="Delete" class="ui-button-raised ui-button-danger"></button>
</li>
</ul>
(...)
As the title suggests ,I am trying to read from a file that can be of any format (not only JSON) and populate my list .How should I do this? I am trying to learn Angular and I'm stuck.
