Skip to content

Declarative rendering

pablocar80 edited this page Feb 15, 2021 · 3 revisions

Lara supports declaratively rendering data using a simple syntax:

using Integrative.Lara;

internal class SimpleComponent : WebComponent
{
    private string _message;
    private string Message { get => _message; set => SetProperty(ref _message, value); }

    public SimpleComponent()
    {
        Message = "My Lara app";
        ShadowRoot.Children = new Node[]
        {
                new HtmlDivElement
                {
                    Children = new Node[]
                    {
                        new HtmlSpanElement()
                            .Bind(this, x => x.InnerText = Message)
                    }
                }
        };
    }
}

Notice in the example above:

  • The inherited method SetProperty modifies the value of the variable _message and triggers a PropertyChanged event when the value changes.
  • The object's constructor builds the component's structure and elements.
  • The ShadowRoot element in a component represents the object's empty canvas. We add elements inside it by assigning it's Children collection.
  • The Bind method assigns the Message property to the span's inner text. This value gets reassigned every time our component triggers the PropertyChanged event.
Clone this wiki locally