Début du formulaire de contact

angular.json

@@ -25,6 +25,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -87,6 +88,7 @@
               "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.css"
             ],
             "scripts": []

package.json

@@ -16,6 +16,7 @@
     "@angular/compiler": "^16.2.0",
     "@angular/core": "^16.2.0",
     "@angular/forms": "^16.2.0",
+    "@angular/material": "^16.2.5",
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",

src/app/app-routing.module.ts

@@ -4,13 +4,15 @@ import { EditorComponent } from './editor/editor.component';
 import { LandingPageComponent } from './landing-page/landing-page.component';
 import { OutputComponent } from './output/output.component';
 import {DocumentationComponent} from "./documentation/documentation.component";
+import { ContactComponent } from './contact/contact.component';
 
 // Toutes les routes de l'application sont définies ici
 const routes: Routes = [
   { path: '', component: LandingPageComponent },
   { path: 'editor', component: EditorComponent },
   { path: 'output', component: OutputComponent },
-  { path: 'documentation', component: DocumentationComponent}
+  { path: 'documentation', component: DocumentationComponent},
+  { path: 'contact', component: ContactComponent}
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -9,6 +9,8 @@ import { EditorComponent } from './editor/editor.component';
 import { OutputComponent } from './output/output.component';
 import { LandingPageComponent } from './landing-page/landing-page.component';
 import { DocumentationComponent } from './documentation/documentation.component';
+import { ContactComponent } from './contact/contact.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
@@ -18,11 +20,13 @@ import { DocumentationComponent } from './documentation/documentation.component'
     EditorComponent,
     OutputComponent,
     LandingPageComponent,
-    DocumentationComponent
+    DocumentationComponent,
+    ContactComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/contact/contact.component.css

@@ -0,0 +1,10 @@
+.form-group {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.form-group input, .form-group textarea {
+    width: 100%;
+}

src/app/contact/contact.component.html

@@ -0,0 +1,24 @@
+<form action="" class="form-group">
+    <mat-form-field appearence="fill">
+        <mat-label>Nom</mat-label>
+        <input matInput>
+    </mat-form-field>
+
+    <mat-form-field appearence="fill">
+        <mat-label>Email</mat-label>
+        <input matInput>
+    </mat-form-field>
+
+    <mat-form-field appearence="fill">
+        <mat-label>Type</mat-label>
+        <mat-select>
+            <mat-option value="Bug">Bug</mat-option>
+            <mat-option value="Recommendation">Recommendation</mat-option>
+        </mat-select>
+    </mat-form-field>
+    <mat-form-field appearence="fill">
+        <mat-label>Message</mat-label>
+        <textarea matInput></textarea>
+    </mat-form-field>
+    <button mat-raised-button color="primary">Envoyer message</button>
+</form>

src/app/contact/contact.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+  let component: ContactComponent;
+  let fixture: ComponentFixture<ContactComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ContactComponent]
+    });
+    fixture = TestBed.createComponent(ContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/contact/contact.component.ts

@@ -0,0 +1,28 @@
+import { Component, NgModule } from '@angular/core';
+
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+
+
+@Component({
+  selector: 'app-contact',
+  templateUrl: './contact.component.html',
+  styleUrls: ['./contact.component.css']
+})
+
+@NgModule({
+  imports: [
+    FormsModule,
+    MatFormFieldModule,
+    MatButtonModule,
+    MatInputModule,
+    MatSelectModule,
+    ReactiveFormsModule
+  ]
+})
+
+export class ContactComponent {
+}

src/app/header/header.component.html

@@ -29,6 +29,8 @@
         routerLinkActive="active"
         [routerLinkActiveOptions]="{ exact: true }"
       >Documentation</a>
+
+      <a routerLink="contact" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Contact</a>
     </nav>
   </div>
 

src/index.html

@@ -12,8 +12,11 @@
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
       rel="stylesheet"
     />
-  </head>
+      <link rel="preconnect" href="https://fonts.gstatic.com">
-  <body>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+  <body class="mat-typography">
     <app-root></app-root>
   </body>
 </html>

src/styles.css

@@ -23,3 +23,6 @@ button {
         box-shadow: lightgray 0 0 5px;
     }
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }