Property 'Foods' is private and only accessible Within class 'Mainlifecyclecomponent'

Question

How to access private attributes within html? I created private food, but I can’t access it in html because it’s private. has some way to access?

main-Lifecycle.ts

import { Client } from '../client';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-main-lifecycle',
  templateUrl: './main-lifecycle.component.html',
  styleUrls: ['./main-lifecycle.component.css']
})
export class MainLifecycleComponent implements OnInit {
  private clients: Client[] = [];
  private foods : string [] = ["Rice", "Beans", "Pizza"];
  private name: string = "";
  private age: number;
  private food: string;

  constructor() { }

  ngOnInit(): void {
  }

}

main-Lifecycle.html

<mat-card>
    <mat-card-title>
      Clients
    </mat-card-title>
    <mat-card-content>
        <section>
            <mat-form-field class="form-field" style="width: 400px; padding-right: 20px;" >
                <input matInput placeholder="Name" [(ngModel)]="name" name="name">
            </mat-form-field>

            <mat-form-field class="form-field" style="width: 100px; padding-right: 20px" >
                <input matInput placeholder="Age" [(ngModel)]="age" name="age">
            </mat-form-field>

            <mat-form-field >
                <mat-select placeholder="Favorite Food" [(ngModel)]="food" name = "food ">
                    <mat-option *ngFor="let foodOption of foods" [value]="foodOption">
                        {{foodOption}}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <button mat-icon-button color="primary" >
                <mat-icon>check</mat-icon>
            </button>

            <button mat-icon-button color="primary" >
                <mat-icon>refresh</mat-icon>
            </button>
        </section>
    </mat-card-content>
</mat-card>