Angular Mat Table doesnt show all data in the row

Question

I am trying to bind the data from static file, to a mat-table component from Angular Material.

Problem.

Not all data are shown in the corresponding rows, just part of it.

Result

Component TS

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material'
import { HttpClient } from '@angular/common/http'
import { ExperienciasService } from './services/experiencias.service';
import { variables } from '../../../../config/config';
//import { dataInfoPaztaza } from './info-data/paztaza.data';
import { dataInfoTigre } from './info-data/tigre.data';

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

  columnsInfo = ['tecnica', 'fuente', 'url'];
  infoTigre
  infoPaztaza
  currentAPI = variables.NAME_CUENCA

  constructor(public _experienciasService: ExperienciasService,
              private http: HttpClient) { }

  ngOnInit() {
    this.loadInfo()
  }


  loadInfo() {
    if (this.currentAPI == "TIGRE") {
      let data = dataInfoTigre
      this.infoTigre = new MatTableDataSource<any>(data)
    } else if (this.currentAPI == "PAZTAZA") {
      this.http.get("/assets/table-data/paztaza.data.json").subscribe( (res:any) => {
        console.log(res)
        this.infoPaztaza = new MatTableDataSource<any>(res)
      })
    }
  }

}

Component HTML

<mat-table [dataSource]="infoTigre" [class.mat-elevation-z2]="true" *ngIf="infoTigre">
  <ng-container matColumnDef="tecnica" >
    <mat-header-cell  *matHeaderCellDef mat-sort-header>TECNICA DE REMEDIACIÓN</mat-header-cell>
    <mat-cell  *matCellDef="let repoItem">{{repoItem?.tecnica}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="fuente">
    <mat-header-cell  *matHeaderCellDef mat-sort-header>FUENTE</mat-header-cell>
    <mat-cell  *matCellDef="let repoItem">{{repoItem?.fuente}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="url">
    <mat-header-cell  *matHeaderCellDef mat-sort-header>URL</mat-header-cell>
    <mat-cell  *matCellDef="let repoItem">{{repoItem?.url}}</mat-cell>
  </ng-container>
  <mat-header-row  *matHeaderRowDef="columnsInfo"></mat-header-row>
  <mat-row *matRowDef="let row; columns: columnsInfo;"></mat-row>
</mat-table>

Data source

export const dataInfoTigre = 
[
    {
        tecnica: "Bioceldas o Biopilas (ex situ/on site u off site)",
        fuente: "Eweis, J., Ergas, D., & Schroeder, C. y. (1998). Bioremediation principles. McGraw-Hill International.",
        url: "http://www.sciepub.com/reference/146581"
    },
    {
        tecnica: "Desorción Térmica",
        fuente: "Hurtado Melo, S. (2010). Diseño básico de una planta de desorción térmica para tratamiento de suelos contaminados. Obtenido de http://bibing.us.es/proyectos/abreproy/20229/fichero/2.+Memoria+del+Proyecto%252F5.+M%C3%A9todos+de+descontaminaci%C3%B3n+por+desorci%C3%B3n+t%C3%A9rmica.pdf",
        url: "http://oa.upm.es/3703/"
    },
    {
        tecnica: "tigre",
        fuente: "2",
        url: "2"
    },
    {
        tecnica: "name",
        fuente: "text",
        url: "Nombre del Rey"
    },
    {
        tecnica: "name",
        fuente: "text",
        url: "Nombre del Rey"
    },
]

Some words to a form validator:

The app uses Angular 6 version, based on Material Design, client really likes. Also we use dynamic rendering depends on backend api.

Answer 1

If you just want to display the complete text without it being cut off you can do the following:

Surround your long text with a span tag:

<mat-cell *matCellDef="let repoItem">
  <span class="long-text">{{repoItem?.fuente}}</span>
</mat-cell>

And add the following CSS:

.long-text {
  overflow: auto;
}

Check out the stackblitz here .