Filter array of objects by using property value in dropdown – Angular template

I’m trying to filter array of objects by using property value and display filter results in dropdown. This is my JSON structure:

var profiles = [{
"name":"Pavan",
"exp": 2,
"subject":"maths"
},
{
"name":"Mark",
"exp": 6,
"subject":"science"
},
{
"name":"sunny",
"exp": 1,
"subject":"maths"
},
{
"name":"Roy",
"exp": 2,
"subject":"science"
}]

Here I want to display names in dropdown where subject is maths. I can able to do filter in ts file and can able to display in dropdown, but I would like to do filter part in template it self. For now I’m displaying all names with below code.

<select   name="profile" class="bx--text-input"  [formControl]="profile">   
          <option value=""  selected>Select profile name</option>
        <option [value]="state.name"  *ngFor="let state of profiles">{{state.name}}</option> 
 </select>  

So if I want to display only subject of maths, how can i filter in template file.

Answer

<select   name="profile" class="bx--text-input"  [formControl]="profile">   
          <option value=""  selected>Select profile name</option> 
         <ng-container *ngFor="let state of profiles;">
              <option [value]="state.name" *ngIf="state.subject =='maths'">
                  {{ state.name }}
              </option>
          </ng-container>
 </select>