Book Image

Web Development with Bootstrap 4 and Angular 2 - Second Edition

By : Sergey Akopkokhyants, Stephen Radford
Book Image

Web Development with Bootstrap 4 and Angular 2 - Second Edition

By: Sergey Akopkokhyants, Stephen Radford

Overview of this book

<p>Two of the most popular frontend frameworks, Angular and Bootstrap, have undergone a major overhaul to embrace emerging web technologies so that developers can build cutting-edge web applications.</p> <p>Inside this title you'll dive, fingers first, into the basics of both the tools, and once you're familiar with them, you'll move onto Bootstrap's new grid system and Angular's built-in directives. You'll then learn how to format output using Angular's pipes and how to make use of the built-in router to set up routes for all your components.</p> <p>Webpack will be your buddy to wrap up your project. Then, after throwing in some SASS to make things pretty, you'll learn how to validate the forms you've built and debug your application. Finally, you'll go on to learn how to obtain smooth transitioning from Bootstrap to Angular and then how to hook up with a server and use Firebase as the persistence layer.</p> <p>Once you're done with this book, you'll not only have a lovely little e-commerce application running, but you'll also take with you the confidence to innovate and build your own applications with ease.</p>
Table of Contents (16 chapters)
Web Development with Bootstrap 4 and Angular 2 - Second Edition
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

Cart view


The cart view lists all items held in the user's shopping cart. It displays product details for each item and, from this page, a user can:

  • Remove all goodies from his or her cart by clicking Clear Cart
  • Update the quantity for any listed item
  • Return to the products list by clicking on Continue shopping
  • Proceed to checkout by clicking Checkout

The wireframe of the cart view

The significant part of the cart view is formed with dynamic content laid out in the grid. Look at the first column of the wireframe. There are rows of similar data we can use to display, modify, and validate. For this purpose, we can use Angular static forms to present the content of the shopping cart on the view.

Let's create cart-view.component.html. In the first column, we need to print out information about products added to the shopping cart:

<div *ngIf="cart.count"> 
    <form #form="ngForm"> 
        <div class="table-responsive"> 
            <table class="table table-sm...