Conditionals and Loops

We can toggle the presence of an element with the Render boolean property:

using Integrative.Lara;

internal class ConditionalRenderComponent : WebComponent
{
    private bool _showText;
    public bool ShowText { get => _showText; set => SetProperty(ref _showText, value); }

    public ConditionalRenderComponent()
    {
        ShadowRoot.Children = new Node[]
        {
            new HtmlDivElement
            {
                InnerText = "Hello!",
            }
            .Bind(this, x => x.Render = ShowText) // Render property here
        };
    }
}

And dynamically generate a list of elements from an observable collection:

using Integrative.Lara;
using System.Collections.ObjectModel;

internal class MyList : WebComponent
{
    private readonly ObservableCollection<string> _names = new ObservableCollection<string>();

    public MyList()
    {
        ShadowRoot.Children = new Node[]
        {
            Fragment.ForEach(_names, (string name) => new HtmlDivElement { InnerText = name }),
        };
        _names.Add("Sarah");
        _names.Add("John");
    }
}