app.component.html

<div class="panel panel-primary">
    <div class="panel-heading">
      <!--Interpolazione-->
       {{title}}
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-2">Filtro</div>
            <div class="col-md-4">
                <input type="text" 
                [(ngModel)]="filtro"/>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <h3>Filtrato per {{filtro}}</h3>
            </div>
        </div>
        <button (click)="azionaImmagine()" class="btn btn-primary">{{testoPulsante}}</button>
        <div class="table-responsive">
            <table class="table" *ngIf="paperi && paperi.length">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nome</th>
                        <th>Città</th>
                        <th>Voto</th>
                        <th>Foto</th>
                        
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let papero of paperi | filtroPaperi:filtro">
                      <!--interpolation--> 
                        <td>{{papero.paperoId}}</td>
                        <td>{{papero.nome}}</td>
                        <td>{{papero.citta}}</td>
                        <td>{{papero.voto}}</td>
                        <!--property binding-->
                        <td><img *ngIf="mostraFoto" [src]="papero.imageUrl" [title]="papero.nome | uppercase"></td>
                        
                </tbody>
            </table>
        </div>


    </div>
</div>