Day 6 Lab Assignments
Complete on the previous lab, and do the following
assignments:
1. Use Json server package (https://github.com/typicode/json-server ) to create
fake JSON API.
a. Create new folder (In any path) and open a new visual studio code window in this path.
b. Install JSON Server: npm install -g json-server
c. Create a db.json file (In your project folder) with the given data format in the lab files.
d. Start JSON Server: json-server --watch db.json
e. You can access your fake json server from this URL: http://localhost:3000
(Note: You can use the following fake API link instead of JSON server:
https://reqres.in/api/product )
2. In environment.ts, add the API base URL: http://localhost:3000 in a variable.
3. Create Category Service that contains:
a. getAllCateogories() that returns all categories (use GET API:
http://localhost:3000/categories).
b. Create any required ViewModels.
4. Create new Product Service that contains the following methods:
a. getAllProducts() that returns array of all products (Use GET API:
http://localhost:3000/products ).
b. getProductsByCategoryID(catID) that returns array of products of the given category
(Use API: http://localhost:3000/products?CategoryID=cid)
c. getProductByID(pID) that returns product with the given prdID (Use GET API:
http://localhost:3000/products/pid ).
d. addProduct(product) that adds new product (Use POST API:
http://localhost:3000/products), knowing that this API return the inserted product object
ton success, so you need this function to return an observable of Product.
e. Create any required ViewModels.
f. You’ll need to import HttpClientModule in app.module, and use HttpClient service in
your service.
5. Change the following components in your project to use the new service with
real data from the fake JSON server:
a. In order component, fill the categories from the new service (Use getAllCateogories())
b. In Order details component, fill the products of selected category from the new service
(Use getProductsByCategoryID(catID))
c. In product details component, display the product details from the new service
(getProductByID(pID)).
6. In each component (or try it on one component at least), Unscbscrribe from all
observables you subscribed to them (in ngOnDestroy).
a. What are observables? And how do they differ than promises?
b. What’s RxJS? And What are Observable operators?
7. Create new link in the navbar (Admin) that opens new component (new
Product).
a. Add new route: ‘/admin/insertproduct’ which redirects to the new product component.
b. Create a Product object in the class of the component and initialize it with static data in
the constructor.
c. Create a button on the new component, that when pressed uses addProduct(product)
method to insert the new product and on success redirects to products (order) component.
8. Change the previous (add product) component and add new form for inserting
the product.
a. Make a dropdown to select the product category (Fill categories from the new service),
and inputs for the other fields of the product.
b. Use 2-way biding to bind from inputs to the Product object in the class.
c. Handle the submit button to use the service to add the new product and redirects to the
products (Order) component on success.
9. Handle Edit and Delete products.
a. In Edit, you should show form with existing values, and user can change and then press
update.
i) Use the same Insert product component, but take URL param: product ID, and add
new product in case if there’s no Prd ID, and update in case of the Prd ID is sent.
b. In Delete, you should display confirm message before delete.
i) You need to delete the deleted product from the products collection after delete
success response, if the delete is implemented on the product list component.
ii) You can use Angular material modal [Bonus]
c. Show success alert in case of success insert, update and delete
i) Use Angular material [Bonus]
10.Create new component (Products list), that lists in products in cards, from this
API: https://reqres.in/api/product
a. Make required link and routes for the new component.
b. Make a new service that return all products from this API: https://reqres.in/api/product
c. Make a new ViewModel that matching the response of the given API.
d. Try to use observable operator map(), to cast the response of this API to your Product
view model, and use it in the service instead the new view model [Bonus].
11.Create new component (Products list), that lists in products in cards, from this
API: https://reqres.in/api/product
a. Make required link and routes for the new component.
b. Make a new service that return all products from this API: https://reqres.in/api/product
c. Make a new ViewModel that matching the response of the given API.
d. Try to use observable operator map(), to cast the response of this API to your Product
view model, and use it in the service instead the new view model [Bonus].
12.In products component, add more products in the file and handle pagination in
the component. [Big Bonus].
a. You can test pagination either on JSON server APIs, or on the fake products API link:
i) JSON server API pigmentation: https://github.com/typicode/json-server#paginate
ii) Fake API link for pagination: https://reqres.in/api/product?page=1
b. Use angular material paginator to handle paging in the component.
Bonus:
1. Use Http Interceptor to show angular material progress for each http request on
your project.
2. Make new components that display data from firebase real time database, or
firebase cloud Firestore functions.
a. Handle authentication with firebase.
b. Try all CRUD operations.
3. Complete admin part to include other product CRUD operations: Delete and
Edit, using the JSON server APIs (Handle required service methods and
components)
a. Use the following methods:
i) Use POST method for add.
ii) Use PUT method for update.
iii) Use DELTE method for delete.
b. Use Angular material Dialog for Edit instead of new component.
c. Use Angular material Dialog for confirming product delete, before deleting the data.
d. Use carousel in product details component to navigate between products [You can use ng-
bootstrap carousel].
e. Handle all required validation for user inputs in all components.
f. Use reactive form in new product component.
4. What are Observables in Angular? Explain using a demo?
a. You can refer to: https://angular.io/guide/observables
5. What is Angular RxJS library? Explain using a demo?
a. You can refer to: https://angular.io/guide/rx-library
6. What are observable operators? Explain them using demos.
a. You can refer to the following tutorials:
i) https://blog.angular-university.io/rxjs-higher-order-mapping/
ii) https://www.c-sharpcorner.com/blogs/rxjs-operators-in-angular
iii) https://indepth.dev/posts/1114/learn-to-combine-rxjs-sequences-with-super-intuitive-
interactive-diagrams
iv) https://angular.io/guide/rx-library
7. What are: Subject, BehaviorSubject and ReplaySubject in Angular? Explain
using a demo?
a. You can refer to: https://stackoverflow.com/questions/34376854/delegation-eventemitter-
or-observable-in-angular/35568924#35568924
