
<mat-grid-list cols="1" *ngIf="!heroe; else divHeroe">
    <mat-grid-tile>
        <mat-spinner></mat-spinner>
    </mat-grid-tile>
</mat-grid-list>


<ng-template #divHeroe>
    
    <div fxLayout="row"
         fxLayout.xs="column"
         fxLayoutGap="30px">

         <div fxFlex="50">
             <h1>{{ heroe.superhero }} <small>- {{ heroe.alter_ego }} </small> </h1>
             <mat-divider></mat-divider>
             <br>
             <img [src]="heroe | imagen">
         </div>

         <div fxFlex="50">
             <h1>{{ heroe.publisher }}</h1>
             <mat-divider></mat-divider>

             <mat-list>
                 <mat-list-item> {{ heroe.first_appearance }} </mat-list-item>
                 <mat-list-item> {{ heroe.characters }} </mat-list-item>
                 <mat-list-item> {{ heroe.publisher }} </mat-list-item>
                 <mat-list-item> {{ heroe.alter_ego }} </mat-list-item>
             </mat-list>

             <br>
             <button mat-button
                     color="warn"
                     (click)="regresar()">
                 Regresar
             </button>
         </div>

    </div>


</ng-template>


