src/app/input/input.component.ts
selector | app-input |
styleUrls | ./input.component.scss |
templateUrl | ./input.component.html |
Properties |
Methods |
Outputs |
constructor()
|
Defined in src/app/input/input.component.ts:11
|
valueEmit | |
Type : EventEmitter
|
|
Defined in src/app/input/input.component.ts:11
|
ngOnInit |
ngOnInit()
|
Defined in src/app/input/input.component.ts:16
|
Returns :
void
|
setState | ||||||
setState(value: boolean)
|
||||||
Defined in src/app/input/input.component.ts:19
|
||||||
Parameters :
Returns :
void
|
isActive |
Default value : false
|
Defined in src/app/input/input.component.ts:9
|
value |
Type : string
|
Defined in src/app/input/input.component.ts:10
|
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.scss']
})
export class InputComponent implements OnInit {
isActive = false;
value: string;
@Output() valueEmit = new EventEmitter<string>();
constructor() {
}
ngOnInit(): void {
}
setState(value: boolean): void {
const text = document.getElementById('inp') as HTMLTextAreaElement;
this.isActive = value;
if (value) {
text.focus();
} else {
this.valueEmit.emit(text.value);
}
}
}
<div [class.open]="isActive" id="input-cover"></div>
<div [class.open]="isActive" id="input">
<label for="inp" id="title">Enter the input:</label>
<br>
<textarea cols="30" id="inp" name="inp" rows="10" spellcheck="false"></textarea>
<br>
<button (click)="this.setState(false);" id="done">Done</button>
</div>
./input.component.scss
#input {
position: fixed;
top: 50%;
width: 30vw;
left: calc(35vw - 20px);
border-bottom: 1px solid #ddf;
padding: 20px;
background: #224;
transform: translateY(-50%) scale(0);
opacity: 0;
transition: all 0.25s;
z-index: 1000;
&.open {
transform: translateY(-50%) scale(1);
opacity: 1;
}
}
#inp {
box-sizing: border-box;
width: 100%;
color: #ddf;
font-size: 1.1em;
background: transparent;
border: none;
font-family: 'Anonymous Pro', monospace;
resize: none;
}
#done {
float: right;
}
#input-cover {
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: none;
&.open {
display: block;
}
}
#title {
display: block;
margin-bottom: 10px;
}