### File

`src/app/input/input.component.ts`

### Implements

`OnInit`

### Metadata

selector | `app-input`
styleUrls | `./input.component.scss`
templateUrl | `./input.component.html`

### Index

###### Properties

- isActive
- value

###### Methods

- ngOnInit
- setState

###### Outputs

- valueEmit

### Constructor

`constructor()`
Defined in src/app/input/input.component.ts:11

### Outputs

valueEmit
Type : `EventEmitter`
Defined in src/app/input/input.component.ts:11

### Methods

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 :

Name | Type | Optional
value | `boolean` | No

Returns : `void`

### Properties

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;
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""