Make a radio button list from an array in Angular 7.

In the template for a component I have:

<table>
   <tr>
      <ng-container *ngFor="let fileFormat of fileFormats; let i=index;">
         <td>
            <input type="radio" name="format" [value]="fileFormat.Extension"
                  [checked]="i==0">
         </td>
         <td>
            {{fileFormat.PublicFacingName}}
         </td>
      </ng-container>
   </tr>
</table>

 
 

In the TypeScript for the component itself the fileFormats variable is an Array<FileFormat> which is hardcoded in the constructor like so:

this.fileFormats = [
   new FileFormat(".pdf", "PDF"),
   new FileFormat(".csv", "CSV"),
   new FileFormat(".docx", "Word"),
   new FileFormat(".xlsx", "Excel")
];

 
 

FileFormat looks like this:

export class FileFormat {
   Extension: string;
   PublicFacingName: string;
   public constructor(extension:string, publicFacingName: string) {
      this.Extension = extension;
      this.PublicFacingName = publicFacingName;
   }
}

 
 

My CSS:

table {
   margin: 5px 0;
   padding: 0;
   border-spacing: 0;
   border-bottom: 1px solid #000000;
}
td {
   margin: 0;
   padding: 0;
}
td:nth-child(2n+0) {
   padding: 1px 10px 0 0;
}
tr {
   margin: 0;
   padding: 0;
}

 
 

We end up with something like so bro: