Cannot Display value of FormArray for @for ( item of itemsFormArray.controls; track item; let...

I have tried different ways to fixed my problem. But I am going in circles

<form [formGroup]="menugrp" >
<div class="MenuBorder2">
<div formArrayName="menuOptions">
@for ( item of itemsFormArray.controls; track item; let i = $index) {
<button mat-button [id]="'mnuoptid' + i"
class="mnuBtnTop" formControlName="item.Text" > </button> }
</div></div>
</form>


Now for typescript code

menugrp:FormGroup;
constructor(private readonly fb: FormBuilder)
{
this.menugrp = this.fb.group(
{
menuOptions: new FormArray([]),
});
}
ngOnInit() {
this.ready = false;
let data = this.AddmenuItems()
for (let item of data) {
(this.menugrp.controls['menuOptions'] as FormArray).push(
new FormGroup<IMenuContent>({
Text: new FormControl(item.Text,{nonNullable: true} ),
Url: new Form Control(item.Url, {nonNullable: true}),
Order: new FormControl(item.Order, {nonNullable: true}),
Type: new FormControl(item.Type, {nonNullable: true})
})
)
}
this.ready = true;
}
get itemsFormArray(): FormArray
{
var options = this.menugrp.controls['menuOptions'] as FormArray;
return options as FormArray;
}


Any assistance would help me going forward Thanks`

To display values that will eventually describe my menu options

Continue reading...