@page "/" @using MatBlazor <MatList> @foreach(var item in this._dic){ <MatListItem> @item.Value.Description <div style="margin-left: auto; position: relative;"> <span class="material-icons icon-toolbar right hover" @onclick="() => OnClick(item)" @ref="@item.Value.Button">more_vert</span> <MatMenu @ref="@item.Value.Menu" class="menu"> <MatList Class="kebabmenu"> <MatListItem Class="menuItem-Smaller hover-hell" @onclick="() => OnDeleteClick(item)">Delete</MatListItem> </MatList> </MatMenu> </div> </MatListItem> <MatListDivider></MatListDivider> } </MatList> @code{ private Dictionary<Guid, Helper> _dic = new Dictionary<Guid, Helper>(); //Helper class to set the references for the MatList private class Helper { public string Description {get; set;} public ElementReference Button {get; set;} // reference public BaseMatMenu Menu {get; set;} // reference } //Initializes the Dictionary with new Guid's and from 0-9 protected override void OnInitialized() { for(int i = 0; i < 10; i++){ this._dic.Add(Guid.NewGuid(), new Helper() {Description = i.ToString()}); } } private void OnClick(KeyValuePair<Guid, Helper> item) { item.Value.Menu.OpenAsync(item.Value.Button); } private void OnDeleteClick(KeyValuePair<Guid, Helper> item) { this._dic.Remove(item.Key); } }