A19–Building App using Angular and ASP.NET Core 2.1–Review Order Details

This post is a part of a series of posts that I am writing as I am building an app using Angular and ASP.NET Core 2.1. Links to previous posts –> A1, A2, A3, A4, A5, A6, A7, A8, A9, A10, A11, A12, A13, A14, A15, A16, A17, A18 Github Repo

On training front, I finished Angular Reactive Forms course by Deborah Kurata on Pluralsight and I am watching Angular Services course by Brice Wilson.

Today, I was able to accomplish following.

1. Create a Review Order Page.

2. Create relevant server side API methods to return data

3. On submit button show confirmation page.

One of the things I had to change was make model names to be camelCase so when retrieving nested object they would display appropriately.

While there are many many issues with the app, I am able to do accomplish one workflow of being able to checkout products in a wizard style format. Notice that I am returning hard coded data for order review page. Once we figure out persistent store we can then return data from data store. There is also an issue with user identity. We want to associate orders with a person and we want to associate orders with unique id. All of that complexity can be handled piece by piece.

Next I want to tackle authentication piece.

That’s all I have for today. Checkout latest changes on github and website.

A18–Building App using Angular and ASP.NET Core 2.1–Reactive Forms, Submitting data

This post is a part of a series of posts that I am writing as I am building an app using Angular and ASP.NET Core 2.1. Links to previous posts –> A1, A2, A3, A4, A5, A6, A7, A8, A9, A10, A11, A12, A13, A14, A15, A16, A17 Github Repo

So I was able to accomplish following

1. Created classes to collect data from Form into Model for Shipping and Payment Pages.

2. Create CheckoutService to call Checkout controller methods

3. Created Controller methods for insert of shipping info and payment info

That’s all I have for today. Checkout latest changes on github and website.

A17–Building App using Angular and ASP.NET Core 2.1–Reactive Forms Validation

This post is a part of a series of posts that I am writing as I am building an app using Angular and ASP.NET Core 2.1. Links to previous posts –> A1, A2, A3, A4, A5, A6, A7, A8, A9, A10, A11, A12, A13, A14, A15, A16 Github Repo

I am currently watching Angular Reactive Forms course on Pluralsight by Deborah Kurata. I like Reactive Forms.

Today, I added form validation to shipping info page and payment info page.

Couple of things to note regarding behavior

1. Validation occurs as soon as you tab our or touch a control.

2. If you click on Next button then validation messages will be shown

3. Simple Regex pattern matching used for phone, card number, security code

4. Added dropdown for selecting card type and expiration month and year

5. Custom group validation implemented for validation Expiration month.

Special thanks to Loiane Groner for sharing code @ repo to show validation on button click. This trick and using a method to display validation messages saved a ton of repetitive code for me. I like it a lot.

Thanks to Debora Kurata for sharing code @ repo.

That’s all I have for today. Checkout latest changes on github and website.

A16–Building App using Angular and ASP.NET Core 2.1–Reactive Forms

This post is a part of a series of posts that I am writing as I am building an app using Angular and ASP.NET Core 2.1. Links to previous posts –> A1, A2, A3, A4, A5, A6, A7, A8, A9, A10, A11, A12, A13, A14, A15 Github Repo

I finished watching Angular Routing course and I think that it is very powerful. I like multiple router-outlet, child routes and route guard concept. Route resolver is a good concept too but I am running into issues when implementing in another child route.

Today using reactive forms I have added forms to collect shipping and payment information. There is no validation logic in there right now.

Shipping Info Form

Payment Info Form

One of my pet peeve with Angular is dependency injection. I ran into an issue with a child route resolver using a service and I couldn’t figure out why it won’t resolve the service. I wish there was a better way to let us know about why it couldn’t resolve the service. Can we have Angular Dependency Injection best practice guide?

Alright everyone, that’s all I have for today. Checkout latest changes on github and website.

A15–Building App using Angular and ASP.NET Core 2.1–Route Resolvers, Child Routes

This post is a part of a series of posts that I am writing as I am building an app using Angular and ASP.NET Core 2.1. Links to previous posts –> A1, A2, A3, A4, A5, A6, A7, A8, A9, A10, A11, A12, A13, A14 Github Repo

Past three days have been hectic so there were no posts.

I am currently watching Angular Routing pluralsight course by Debora Kurata. I learned about Route Resolvers and Child routes. I refactored product/edit, product/details, product/delete page to use route resolver. Next I wanted to finish checkout page but I wanted to have a wizard type flow. After learning about child routes, I added shipping info, payment details, order review and confirmation components. I also refactored shopping cart as part of wizard. Shopping cart is the first page in this wizard.

Now when you click on shopping cart icon to the top right of the app you will see.

At the top, you can see different stages as nav items. As you start clicking different nav items you will see respective components.

Below is our shopping-routing module.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { CheckoutPaymentComponent } from './checkout-payment/checkout-payment.component';
import { CheckoutReviewComponent } from './checkout-review/checkout-review.component';
import { CheckoutConfirmationComponent } from './checkout-confirmation/checkout-confirmation.component';
import { CheckoutShippinginfoComponent } from './checkout-shippinginfo/checkout-shippinginfo.component';

const routes: Routes = [
{
  path: 'checkout', component: CheckoutComponent, children: [
    { path: '', redirectTo: 'shoppingcart',  pathMatch: 'full'},
    { path: 'shoppingcart', component: ShoppingCartComponent} ,
    { path: 'shippinginfo', component: CheckoutShippinginfoComponent },
    { path: 'payment', component: CheckoutPaymentComponent },
    { path: 'review', component: CheckoutReviewComponent },
    { path: 'confirmation', component: CheckoutConfirmationComponent }
  ]
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ShoppingRoutingModule { }

There is one thing I learned about property pathMatch: ‘full’—you cannot add it wherever you like. Initially I added to checkout path, and then I added to different child paths and it wasn’t working. So I removed that property.

Other minor css improvements include navbar nav-item active styling.

One thing bugging me is responsiveness of top wizard navigation for checkout component. I want to figure best way to handle that. I am thinking to show full text with icon and on smaller screens just show icons. As shown below, you can see how bad the styling is on smaller screens—completely unacceptable.

Alright everyone, that’s all I have for today. Checkout latest changes on github and website.