add 09-template-driven-forms

angular.json

@@ -875,6 +875,103 @@
           }
         }
       }
+    },
+    "09-template-driven-forms": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "inlineTemplate": true,
+          "inlineStyle": true,
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "projects/09-template-driven-forms",
+      "sourceRoot": "projects/09-template-driven-forms/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/09-template-driven-forms",
+            "index": "projects/09-template-driven-forms/src/index.html",
+            "browser": "projects/09-template-driven-forms/src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "projects/09-template-driven-forms/tsconfig.app.json",
+            "assets": [
+              "projects/09-template-driven-forms/src/favicon.ico",
+              "projects/09-template-driven-forms/src/assets"
+            ],
+            "styles": [
+              "projects/09-template-driven-forms/src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "09-template-driven-forms:build:production"
+            },
+            "development": {
+              "buildTarget": "09-template-driven-forms:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "09-template-driven-forms:build"
+          }
+        }
+      }
     }
   },
   "cli": {

projects/08-routing-recap/src/styles.css

@@ -1 +1,62 @@
-/* You can add global styles to this file, and also import other style files */
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/*
+    2. Remove default margin
+  */
+* {
+  margin: 0;
+}
+/*
+    Typographic tweaks!
+    3. Add accessible line-height
+    4. Improve text rendering
+  */
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+    5. Improve media defaults
+  */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+    6. Remove built-in form typography styles
+  */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+/*
+    7. Avoid text overflows
+  */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+/*
+    8. Create a root stacking context
+  */
+#root,
+#__next {
+  isolation: isolate;
+}

projects/09-template-driven-forms/README.md

@@ -0,0 +1,47 @@
+# 09-template-driven-forms
+
+Forms are a big part of many apps because they enable your app to accept user input. Let's learn about how forms are handled in Angular.
+
+In Angular, there are two types of forms: template-driven and reactive. You'll learn about both over the next few activities.
+
+In this activity, you'll learn how to setup a form using a template-driven approach.
+
+## Run this example
+
+From the command line at the root of the project:
+
+```bash
+ng serve 09-template-drive-forms
+```
+
+## Instructions
+
+### Create the form elements
+
+1. In `app.component.ts`, define an `input` element:
+
+   - `type="text"`
+   - `id="title"`.
+
+1. Next, define a `textarea` element:
+   - `id="body"`
+
+### Create the model data
+
+1. In the body of `AppComponent` class, add two `string` properties: `title` and `body`
+
+### Configure the form
+
+1. In `app.component.ts`, import `FormsModule` at the file level.
+
+1. Add `FormsModule` to the `imports` array of the `AppComponent`.
+
+1. Update the `input` element to bind `[(ngModel)]` to the `title` property of `AppComponent`.
+
+1. Update the `textarea` element to bind `[(ngModel)]` to the `body` property of `AppComponent`.
+
+1. Add string interpolation for both properties to confirm that the values are being bound properly.
+
+1. Save your changes.
+
+1. Confirm in the browser that th properties are updated properly.

projects/09-template-driven-forms/src/app/app.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  template: `
+    <article>
+      <h1>Blog Post</h1>
+      <section>
+        <label for="title">Post Title</label>
+        <!-- add the input -->
+
+        <label for="body">Post Body</label>
+        <!-- add the textarea -->
+      </section>
+      <!-- <section>
+        <p>Display title</p>
+        <p>Display value</p>
+      </section> -->
+    </article>
+  `,
+})
+export class AppComponent {
+  title = '09-template-driven-forms';
+}

projects/09-template-driven-forms/src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)]
+};

projects/09-template-driven-forms/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

projects/09-template-driven-forms/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>09TemplateDrivenForms</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

projects/09-template-driven-forms/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

projects/09-template-driven-forms/src/styles.css

@@ -0,0 +1,84 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/*
+    2. Remove default margin
+  */
+* {
+  margin: 0;
+}
+/*
+    Typographic tweaks!
+    3. Add accessible line-height
+    4. Improve text rendering
+  */
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+    5. Improve media defaults
+  */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+    6. Remove built-in form typography styles
+  */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+/*
+    7. Avoid text overflows
+  */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+/*
+    8. Create a root stacking context
+  */
+#root,
+#__next {
+  isolation: isolate;
+}
+
+body {
+  font-family: tahoma;
+  padding: 20px;
+}
+#body {
+  height: 200px;
+  width: 400px;
+}
+#title {
+  padding: 5px;
+  border: solid 1px #444;
+  border-radius: 3px;
+  width: 400px;
+}
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+h1 {
+  font-size: 40pt;
+}

projects/09-template-driven-forms/tsconfig.app.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}