Angular with JSON + Typescript

Question

Should I read a JSON and print the results inside a dynamically angled HTML.

The site would be a kind of chat where I have tags with dynamic DATABIDING, within the <ul class="list-group row"> I should list each "message" that would be the JSON.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map }  from 'rxjs/operators';


@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {

//  constructor(private _http:HttpClient) { 
//    }
//    ngOnInit() {
//      this.emissor = 'Victor';
//      let preparacao = { texto: 'texto 1', contato: 'garibaldo', data: new Date(), souEumesmo: false };
//      this.adicionarMensagem(preparacao);
//      let a = this._http.get("http://localhost:4200/assets/db/mensagem.json");
//      console.log()
//      console.log(a);
  
  constructor(private _http: HttpClient) {

  }
  ngOnInit() {
    this._http.get<PreparacaoDeMensagem[]>("../assets/db/mensagem.json")
      .pipe(
        map(data => {
          let teste = [];
          data.forEach(item => {
            teste.push({
              nome: item.contato
            });
          });
          return teste; 
          
        })
      )
      .subscribe(data => console.log(data));
      
      console.log ("---------------------------------"+JSON.stringify(this._http));
  }
  
  
  contatos: string[] = [];
  emissor: string;
  titulo: string = 'Chat';
  conversa: Mensagem[] = [];
  textoEmEdicao = "";
  digitado: number = 0;
  

  adicionarMensagem(preparacao: PreparacaoDeMensagem) {
    let mensagem = {
      texto: preparacao.texto,
      data: preparacao.data,
      contato: preparacao.contato,
      souEumesmo: preparacao.contato === this.emissor,
    }

    if (mensagem.souEumesmo !== true && this.contatos.indexOf(mensagem.contato) < 0) {
      this.contatos.push(mensagem.contato);
    }

    this.conversa.push(mensagem);
  }

  enviar() {
    let mensagem = {
      texto: this.textoEmEdicao,
      data: new Date(),
      contato: this.emissor
    }

    this.adicionarMensagem(mensagem);
    this.clear();
  }

  clear() {
    this.textoEmEdicao = "";
    this.digitado = 0;
  }

  contar() {
    this.digitado = this.textoEmEdicao.length;
  }

  clicar(){
    if(this.textoEmEdicao != " " && this.textoEmEdicao.length > 0){
      this.enviar();
    }else{
      //TROCAR O PLACEHOLDER 
      this.textoEmEdicao = "ESCREVE ALGO AI ";
    }
    
  }

  verificar(texto: KeyboardEvent ) {
    this.contar();
    (<HTMLTextAreaElement>texto.target).placeholder = "Escrever mensagem...";

    //texto.stopPropagation();
    if (texto.keyCode == 13 || texto.which == 13) {
      texto.preventDefault();
      if(this.textoEmEdicao == "" || this.textoEmEdicao == " "){
        (<HTMLTextAreaElement>texto.target).placeholder = "Digite um valor válido";
      }else{
        (<HTMLTextAreaElement>texto.target).placeholder = "Escrever mensagem...";
        (<HTMLTextAreaElement>texto.target).focus() ;
        this.enviar();
      }
    }

  }

}

class Mensagem {
  texto: string;
  data: Date;
  contato: string;
  souEumesmo: boolean;
}

class PreparacaoDeMensagem {
  texto: string;
  data: Date;
  contato: string;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="card">
  <div class="header">
    <h2>{{titulo}}</h2>
  </div>
  <div class="body">
    <h2 class="card-inside-title"></h2>

    <div class="row clearfix">
      <div class="col-sm-12">
        <div class="form-group">
          <div class="form-line">
            <div class="body">
              <ul class="list-group row">

                <li *ngFor="let mensagem of conversa" class="list-group-item col-sm-8 col-md-8 col-lg-8 col-xl-8"
                  [ngClass]="{'bg-blue pull-right' :mensagem.souEumesmo,'bg-teal pull-left':mensagem.souEumesmo==false}">
                  {{mensagem.contato}} disse em {{mensagem.data | date:'dd/MM HH:mm'}} <br />
                  {{mensagem.texto}}
                </li>

              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row clearfix">
      <div class="col-sm-12">
        <div class="form-group">
          <div class="form-line">
            <textarea type="text" rows="5" maxlength=140 class="form-control no-resize"  (keydown)="verificar($event)"
              [(ngModel)]="textoEmEdicao" placeholder="Escrever mensagem..."></textarea>
          </div>
        </div>
        <span>Caracteres restantes: {{140 - digitado}} </span>
        <button type="button" (click)="clicar()" class="btn btn-primary btn-lg m-l-15 waves-effect pull-right">Enviar</button>
      </div>
    </div>


  </div>
</div>

JSON:

[
    {
        "texto": "Eae", 
        "contato": "Luis", 
        "data": "2018-09-25 T21:08:00"
    },{
        "texto": "Salve povo", 
        "contato": "Rogerio", 
        "data": "2018-09-25 T21:15:00"
    },{
        "texto": "De boas?", 
        "contato": "Victor", 
        "data": "2018-09-25 T21:09:00"
    },{
        "texto": "Tranquilo", 
        "contato": "Luis", 
        "data": "2018-09-25 T21:08:00"
    },{
        "texto": "Nice", 
        "contato": "Rogerio", 
        "data": "2018-09-25 T21:08:00"
    }
]

Answer 1

As it is a property of your Typescript, it will be seen in your HTML...

<table>
  <thead>
    <tr>
       <td>
          Mensagem
        </td>
    </tr>
   </thead>
   <tbody>
    <tr *ngFor = 'let men of mensagem' >
      <td>{{men}}
      </td>
     <tr>
   </tbody>
<table>

Basically ai will go through a message ARRAY displaying the messages in a table, however it does not need to be a table, it could be any structure to repeat...