Merge pull request #1 from actionanand/features/1-template-driven

starting project

src/app/app.component.html

@@ -1,4 +1,6 @@
-{{ title }}
+<header>
+  <img src="logo.jpg" alt="A form and a pencil" />
+  <h1>Angular Forms</h1>
+</header>
 
-
-<router-outlet />
+<app-login />

src/app/app.component.ts

@@ -1,13 +1,11 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+
+import { LoginComponent } from './auth/login/login.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  imports: [LoginComponent],
 })
-export class AppComponent {
-  title = 'Essentials 18';
-}
+export class AppComponent {}

src/app/auth/login/login.component.css

@@ -0,0 +1,11 @@
+.control-row {
+  align-items: flex-end;
+}
+
+.control {
+  flex: 1;
+}
+
+button {
+  padding: 0.6rem 1.75rem;
+}

src/app/auth/login/login.component.html

@@ -0,0 +1,17 @@
+<form>
+  <h2>Login</h2>
+
+  <div class="control-row">
+    <div class="control no-margin">
+      <label for="email">Email</label>
+      <input id="email" type="email" />
+    </div>
+
+    <div class="control no-margin">
+      <label for="password">Password</label>
+      <input id="password" type="password" />
+    </div>
+
+    <button class="button">Login</button>
+  </div>
+</form>

src/app/auth/login/login.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css',
+})
+export class LoginComponent {}

src/app/auth/signup/signup.component.html

@@ -0,0 +1,112 @@
+<form>
+  <h2>Welcome on board!</h2>
+  <p>We just need a little bit of data from you to get you started 🚀</p>
+
+  <div class="control">
+    <label for="email">Email</label>
+    <input id="email" type="email" name="email" />
+  </div>
+
+  <div class="control-row">
+    <div class="control">
+      <label for="password">Password</label>
+      <input id="password" type="password" name="password" />
+    </div>
+
+    <div class="control">
+      <label for="confirm-password">Confirm Password</label>
+      <input id="confirm-password" type="password" name="confirm-password" />
+    </div>
+  </div>
+
+  <hr />
+
+  <div>
+    <div class="control-row">
+      <div class="control">
+        <label for="first-name">First Name</label>
+        <input type="text" id="first-name" name="first-name" />
+      </div>
+
+      <div class="control">
+        <label for="last-name">Last Name</label>
+        <input type="text" id="last-name" name="last-name" />
+      </div>
+    </div>
+
+    <fieldset>
+      <legend>Your Address</legend>
+
+      <div class="control-row">
+        <div class="control">
+          <label for="street">Street</label>
+          <input type="text" id="street" name="street" />
+        </div>
+
+        <div class="control">
+          <label for="number">Number</label>
+          <input type="text" id="number" name="number" />
+        </div>
+      </div>
+
+      <div class="control-row">
+        <div class="control">
+          <label for="postal-code">Postal Code</label>
+          <input type="text" id="postal-code" name="postal-code" />
+        </div>
+
+        <div class="control">
+          <label for="city">City</label>
+          <input type="text" id="city" name="city" />
+        </div>
+      </div>
+    </fieldset>
+  </div>
+
+  <hr />
+
+  <div class="control-row">
+    <div class="control">
+      <label for="role">What best describes your role?</label>
+      <select id="role" name="role">
+        <option value="student">Student</option>
+        <option value="teacher">Teacher</option>
+        <option value="employee">Employee</option>
+        <option value="founder">Founder</option>
+        <option value="other">Other</option>
+      </select>
+    </div>
+  </div>
+
+  <fieldset>
+    <legend>How did you find us?</legend>
+    <div class="control">
+      <input type="checkbox" id="google" name="acquisition" value="google" />
+      <label for="google">Google</label>
+    </div>
+
+    <div class="control">
+      <input type="checkbox" id="friend" name="acquisition" value="friend" />
+      <label for="friend">Referred by friend</label>
+    </div>
+
+    <div class="control">
+      <input type="checkbox" id="other" name="acquisition" value="other" />
+      <label for="other">Other</label>
+    </div>
+  </fieldset>
+
+  <div class="control-row">
+    <div class="control">
+      <label for="terms-and-conditions">
+        <input type="checkbox" id="terms-and-conditions" name="terms" />
+        I agree to the terms and conditions
+      </label>
+    </div>
+  </div>
+
+  <p class="form-actions">
+    <button type="reset" class="button button-flat">Reset</button>
+    <button type="submit" class="button">Sign up</button>
+  </p>
+</form>

src/app/auth/signup/signup.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-signup',
+  standalone: true,
+  templateUrl: './signup.component.html',
+  styleUrl: './signup.component.css',
+})
+export class SignupComponent {}

src/index.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Investment Calculator</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>
+  <head>
+    <meta charset="utf-8" />
+    <title>Forms</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="logo.jpg" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>

src/main.ts

@@ -1,6 +1,5 @@
 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));
+bootstrapApplication(AppComponent).catch(err => console.error(err));