Book Image

Switching to Angular 2

By : Minko Gechev
Book Image

Switching to Angular 2

By: Minko Gechev

Overview of this book

<p>AngularJS is a JavaScript framework that makes building web applications easier. It is used today in large-scale, high-traffic websites that struggle with under-performance, portability issues, as well as SEO unfriendliness, and complexity at scale.</p> <p>Angular 2 changes that.</p> <p>It is the modern framework you need to build performant and robust web applications. “Switching to Angular 2” is the quickest way to get to grips with Angular 2 and will help you transition in to the brave new world of Angular 2.</p> <p>We’ll start with an overview which sets the changes of the framework in context with version 1.x. After that, you will be taken on a TypeScript crash-course so we can take advantage of Angular 2 in its native, statically-typed environment. We’ll look at the new change-detection method in detail, how Directives and Components change how you create websites with Angular, the new Angular 2 router, and much more.</p> <p>By the end of the book, you’ll be ready to start building quick and efficient Angular 2 applications that take advantage of all the new features on offer.</p>
Table of Contents (16 chapters)
Switching to Angular 2
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Developing model-driven forms in Angular 2


These are going to be the last steps in finishing the "Coders repository". You can build on top of the code at ch6/ts/step-1/ (or ch6/ts/step-2 depending on your previous work) in order to extend the application's functionality with the new concepts we're going to cover. The complete example is located at ch7/ts/multi-page-model-driven.

This is the result that we are going to achieve by the end of this section:

In the preceding screenshot, there are the following two forms:

  • A form for importing existing users from GitHub that contains:

    • The input for the GitHub handle.

    • A checkbox that points out whether we want to import the developer from GitHub or enter it manually.

  • A form for entering new users manually.

The second form looks exactly the way we finished it in the last section. However, this time, its definition looks a little bit different:

<form class="form col-md-4"
      [ngFormModel]="addDevForm" [hidden]="submitted">
  <!-- TODO -->
...