Angular Material matTooltip break line elements

Nel caso che si ha la necessità di utilizzare il controllo MatTooltip di Angular Material e si vuole riportare il testo a capo, ossia una parola sotto l'altra, possiamo effettuare tale operazione tramite lo stile css.

Di seguito si riporta il frammento di codice per tale operazione in Angular e TypeScript

HTML:

 <mat-list  [matTooltip]="getElementiTooltip()" placement="bottom">

    <div>

{{ variabile }}

                                </div>

                            </mat-list>

SCSS:

::ng-deep .mat-tooltip {

    white-space: pre-line;

  }

TypeScript:

 getElementiToolTip(proposti: string[]) : string{

       let Risultato: string = "";

        Array.forEach(p=> returnRisultato += p + ' \n ' );

        return Risultato;

    }