Blazorise Repeater component

The repeater component is a helper component that repeats the child content for each element in a collection.

One advantage over using traditional @foreach loop is that repeater have a full support for INotifyCollectionChanged. Meaning you can do custom actions whenever a data-source changes.

Examples

Basic

  • 1
  • 2
  • 3
  • 4
<UnorderedList>
    <Repeater Items="@items" CollectionChanged="@OnCollectionChanged">
        <UnorderedListItem style="@GetColor( context )">@context</UnorderedListItem>
    </Repeater>
</UnorderedList>

@code{
    System.Collections.ObjectModel.ObservableCollection<int> items { get; } = new( Enumerable.Range( 1, 4 ) );

    Task OnCollectionChanged( System.Collections.Specialized.NotifyCollectionChangedEventArgs eventArgs )
    {
        // do something

        return Task.CompletedTask;
    }

    private static string GetColor( int number )
    {
        const string letters = "0123456789ABCDEF";

        var color = "";

        for ( var i = 0; i < 6; i++ )
        {
            color += letters[( 3 * number + i ) % letters.Length];
        }

        return $"color: #{color}";
    }
}

Best Practices

External State

Item templates should remain focused on presentation while collection mutations flow through a single state owner. Use stable item identities whenever repeated content contains stateful controls or can be reordered, allowing Blazor to preserve the correct component instance.

Data States

Provide explicit loading, empty, and error states so an empty region is never ambiguous. For large collections, use paging or virtualization rather than rendering every item at once.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page