Saving off ViewChild changes

Author: tjvantoll

images/chapter4/typescript.png

@@ -140,9 +140,9 @@ Open `app/app.component.ts` and replace the existing `@Component` with the follo
 @Component({
   selector: "my-app",
   template: `
-    <TextField hint="Email Address" id="email" keyboardType="email"
+    <TextField hint="Email Address" keyboardType="email"
       autocorrect="false" autocapitalizationType="none"></TextField>
-    <TextField hint="Password" id="password" secure="true"></TextField>
+    <TextField hint="Password" secure="true"></TextField>
 
     <Button text="Sign in"></Button>
     <Button text="Sign up for Groceries"></Button>
@@ -199,9 +199,9 @@ Open `app/app.component.ts` and add a `<StackLayout>` element within your compon
   selector: "my-app",
   template: `
     <StackLayout>
-      <TextField hint="Email Address" id="email" keyboardType="email"
+      <TextField hint="Email Address" keyboardType="email"
         autocorrect="false" autocapitalizationType="none"></TextField>
-      <TextField hint="Password" id="password" secure="true"></TextField>
+      <TextField hint="Password" secure="true"></TextField>
 
       <Button text="Sign in"></Button>
       <Button text="Sign up for Groceries"></Button>
@@ -308,9 +308,9 @@ Open your `app/app.component.ts` file and add a `styleUrls` property, so that th
   selector: "my-app",
   template: `
     <StackLayout>
-      <TextField hint="Email Address" id="email" keyboardType="email"
+      <TextField hint="Email Address" keyboardType="email"
         autocorrect="false" autocapitalizationType="none"></TextField>
-      <TextField hint="Password" id="password" secure="true"></TextField>
+      <TextField hint="Password" secure="true"></TextField>
 
       <Button text="Sign in"></Button>
       <Button text="Sign up for Groceries"></Button>
@@ -338,7 +338,7 @@ Button, TextField {
   margin-right: 16;
   margin-bottom: 10;
 }
-#submit-button {
+.submit-button {
   background-color: #CB1D00;
   color: white;
   margin-top: 20;
@@ -353,21 +353,21 @@ Why three files? Much like you divided your global files into `app.css`, `platfo
 
 The great thing about placing CSS rules at the component level is you can use concise CSS selectors such as `Button` and `TextField`, and not worry about those rules applying to all buttons and text fields in your application, as Angular 2 ensures those rules remain scoped to your component.
 
-Before we see what your app looks like now, there’s one small change you need to make. Notice that the last selector used in `login-common.css` is `#submit-button`. Much like using CSS on the web, in NativeScript you can both `id` and `class` attributes to target specific user interface elements, but at the moment there’s no UI element in your app with an `id` of `"submit-button"`. Let’s change that.
+Before we see what your app looks like now, there’s one small change you need to make. Notice that the last selector used in `login-common.css` is `.submit-button`. Much like using CSS on the web, in NativeScript you can both `id` and `class` attributes to target specific user interface elements, but at the moment there’s no UI element in your app with an `class` of `"submit-button"`. Let’s change that.
 
 <h4 class="exercise-start">
-    <b>Exercise</b>: Add an `id` attribute
+    <b>Exercise</b>: Add a `class` attribute
 </h4>
 
 Open your `app/app.component.ts` file, find `<Button text="Sign in"></Button>` in your component’s `template`, and replace it with the code below:
 
 ``` XML
-<Button text="Sign in" id="submit-button"></Button>
+<Button text="Sign in" class="submit-button"></Button>
 ```
 
 <div class="exercise-end"></div>
 
-With this last `id` change in place your app is starting to look a little nicer:
+With this last `class` change in place your app is starting to look a little nicer:
 
 ![login 4](images/chapter2/ios/4.png)
 ![login 4](images/chapter2/android/4.png)

index.html

@@ -13,7 +13,7 @@ Most user interfaces are driven by events. In NativeScript apps, those events ar
 Open `app/app.component.ts`, find the existing sign in button within your component’s `template` (`<Button text="Sign in"></Button>`), and replace it with the following code:
 
 ``` TypeScript
-<Button text="Sign in" id="submit-button" (tap)="submit()"></Button>
+<Button text="Sign in" class="submit-button" (tap)="submit()"></Button>
 ```
 
 Next, in the same file, replace the current `AppComponent` declaration with the one shown below:
@@ -64,7 +64,7 @@ export class AppComponent {
 Next, find the first `<TextField>` in your component’s `template` and replace it with the code below, which adds a new `text` attribute:
 
 ``` XML
-<TextField hint="Email Address" id="email" keyboardType="email" [text]="email"
+<TextField hint="Email Address" keyboardType="email" [text]="email"
   autocorrect="false" autocapitalizationType="none"></TextField>
 ```
 
@@ -92,7 +92,7 @@ To fix this, you need to switch to Angular 2’s two-way data binding syntax.
 In `app/app.component.ts`, find the first `<TextField>`, and replace it with the `<TextField>` below, which introduces a new `[(ngModel)]` attribute:
 
 ``` XML
-<TextField hint="Email Address" id="email" keyboardType="email" [(ngModel)]="email"
+<TextField hint="Email Address" keyboardType="email" [(ngModel)]="email"
   autocorrect="false" autocapitalizationType="none"></TextField>
 ```
 
@@ -114,7 +114,7 @@ Before we move on, let’s make one additional change to show what else you can
 Open `app/app.component.ts` and replace the two existing buttons with the code below:
 
 ``` XML
-<Button [text]="isLoggingIn ? 'Sign in' : 'Sign up'" id="submit-button" (tap)="submit()"></Button>
+<Button [text]="isLoggingIn ? 'Sign in' : 'Sign up'" class="submit-button" (tap)="submit()"></Button>
 <Button [text]="isLoggingIn ? 'Sign up' : 'Back to login'" (tap)="toggleDisplay()"></Button>
 ```
 
@@ -202,9 +202,9 @@ Instead of storing data on the `AppComponent` directly, you’re now using the `
 Your next step is to use this new model object in your template. To do that, replace the two existing `<TextField>`s with the code shown below, which updates the `[(ngModel)]` bindings to point at the new `User` object:
 
 ``` XML
-<TextField hint="Email Address" id="email" keyboardType="email" [(ngModel)]="user.email"
+<TextField hint="Email Address" keyboardType="email" [(ngModel)]="user.email"
   autocorrect="false" autocapitalizationType="none"></TextField>
-<TextField hint="Password" id="password" secure="true" [(ngModel)]="user.password"></TextField>
+<TextField hint="Password" secure="true" [(ngModel)]="user.password"></TextField>
 ```
 
 As one final change, because this template is getting to be a bit complex, let’s move it into a separate file. Open `app/pages/login/login.html` and paste in the following code:
@@ -213,11 +213,11 @@ As one final change, because this template is getting to be a bit complex, let
 <StackLayout>
   <Image src="res://logo_login" stretch="none" horizontalAlignment="center"></Image>
 
-  <TextField hint="Email Address" id="email" keyboardType="email" [(ngModel)]="user.email"
+  <TextField hint="Email Address" keyboardType="email" [(ngModel)]="user.email"
     autocorrect="false" autocapitalizationType="none"></TextField>
-  <TextField hint="Password" id="password" secure="true" [(ngModel)]="user.password"></TextField>
+  <TextField hint="Password" secure="true" [(ngModel)]="user.password"></TextField>
 
-  <Button [text]="isLoggingIn ? 'Sign in' : 'Sign up'" id="submit-button" (tap)="submit()"></Button>
+  <Button [text]="isLoggingIn ? 'Sign in' : 'Sign up'" class="submit-button" (tap)="submit()"></Button>
   <Button [text]="isLoggingIn ? 'Sign up' : 'Back to login'" (tap)="toggleDisplay()"></Button>
 </StackLayout>
 ```