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

Chapter 7. Working with Forms

This chapter will show readers how to use Angular 2 directives related to form creation and how to use a code-based form component to the HTML form. The chapter will use Bootstrap 4 to enhance the look of the form and to indicate invalid input for our web application.

At the end of the chapter, you will have a solid understanding of:

  • Bootstrap 4 forms
  • Angular 2 form directives
  • One-way and two-way data bindings
  • How to add validation to a form
  • Joining the pieces of our application

Let's start with the following steps:

  1. Open the Terminal, create a folder called ecommercem and open it.
  2. Copy the content of the project from the folder, chapter_7/1.ecommerce-seed, into the new project.
  3. Run the following script to install NPM modules:
            npm install
    
  4. Start the TypeScript watcher and lite server with the following command:
            npm start
    

This script opens the web browser and navigates to the welcome page of the project.