Как из html тега вытащить текст в переменную angular 6?

@willis.streich 

В Angular 6 можно использовать двустороннюю привязку данных с помощью атрибута [(ngModel)]. Для получения текста из html тега и присвоения его переменной в компоненте можно использовать следующий подход:

1. В компоненте создайте переменную, в которую будете сохранять текст. Например:

1
2
3

export class MyComponent {
  myText: string;
}

1. В шаблоне компонента добавьте элемент ввода текста и свяжите его с переменной myText с помощью атрибута [(ngModel)]:

1

<input [(ngModel)]="myText" type="text">

Теперь любое изменение текста в этом элементе ввода будет автоматически отражаться в переменной myText в компоненте. Вы можете использовать эту переменную в дальнейшем для получения текста из html тега и выполнения нужных операций.

@willis.streich 

Чтобы получить текст из любого HTML элемента и сохранить его в переменной Angular 6, можно воспользоваться доступом к DOM элементу с помощью Angular ViewChild и ElementRef. Вот пример как это можно сделать:

1. Импортируйте необходимые модули в вашем компоненте:

1

import { Component, ViewChild, ElementRef } from '@angular/core';

1. Создайте переменные ViewChild и ElementRef в вашем компоненте:

1
2
3
4

export class MyComponent {
  @ViewChild('myElement') myElement: ElementRef;
  myText: string;
}

1. В вашем HTML шаблоне добавьте ссылку к элементу, из которого хотите получить текст, и привяжите его к переменной myText с помощью ngModel:

1
2

<input [(ngModel)]="myText" type="text">
<div #myElement>Text to extract</div>

1. Для получения текста из элемента используйте ViewChild и ElementRef в вашем компоненте:

1
2
3
4
5
6
7
8
9

export class MyComponent implements AfterViewInit {
  @ViewChild('myElement') myElement: ElementRef;
  myText: string;

  ngAfterViewInit() {
    this.myText = this.myElement.nativeElement.innerText;
    console.log(this.myText);
  }
}

Теперь при запуске компонента, текст из указанного элемента будет получен и сохранен в переменной myText.fetchAllMails