#22 Textarea element implemented to the app with autofocus option

Author: ofcyln

src/app/app-routing.module.ts

@@ -1,13 +1,16 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+
 import { NotFoundComponent } from './core/not-found/not-found.component';
+import { TextAreaComponent } from './components/text-area/text-area.component';
 
 const routes: Routes = [
   {
     path: '',
     redirectTo: '/',
     pathMatch: 'full',
   },
+  { path: '', component: TextAreaComponent },
   { path: 'not-found', component: NotFoundComponent },
   { path: '**', redirectTo: 'not-found' },
 ];

src/app/app.module.ts

@@ -5,10 +5,12 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
+
 import { AppComponent } from './app.component';
+import { TextAreaComponent } from './components/text-area/text-area.component';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, TextAreaComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,

src/app/components/text-area/text-area.component.html

@@ -0,0 +1,5 @@
+<textarea #saveTheText
+          name="saveTheText"
+          id="saveTheText"
+          data-text-area
+          autofocus></textarea>

src/app/components/text-area/text-area.component.scss

@@ -0,0 +1,12 @@
+[data-text-area] {
+	display: flex;
+	height: 100vh;
+	width: 100%;
+	border: 0;
+	padding: 1rem;
+	font-size: 1.2rem;
+	resize: none;
+	box-sizing: border-box;
+	background-color: transparent;
+	outline: none;
+}

src/app/components/text-area/text-area.component.spec.ts

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

src/app/components/text-area/text-area.component.ts

@@ -0,0 +1,18 @@
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-text-area',
+  templateUrl: './text-area.component.html',
+  styleUrls: ['./text-area.component.scss'],
+})
+export class TextAreaComponent implements OnInit, AfterViewInit {
+  @ViewChild('saveTheText') saveTheText: any;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  ngAfterViewInit(): void {
+    this.saveTheText.nativeElement.focus();
+  }
+}

src/styles.scss

@@ -11,6 +11,7 @@ body {
 		height: 100vh;
 		width: 100%;
 		display: flex;
+		position: fixed;
 		background-image: url('assets/img/logo/square-opaque.svg');
 		background-repeat: no-repeat;
 		background-color: #fbfbfb;