You can trigger the animation for the Drawer component by calling ToggleAsync() on the reference to the Drawer component:
<TelerikButton OnClick="@(async Task () => await DrawerRef!.ToggleAsync())" />
However, when you toggle the Expanded parameter instead, it still toggles the Drawer but does not trigger the animation:
<TelerikButton OnClick="@(() => Expanded = !Expanded)" />
As a result, if I want the Drawer component to be expanded by default, but I still want the user to be able to toggle it, I have to call ToggleAsync() on the reference to the component and bind the Expanded parameter, which is unnecessary verbose for such a common scenario:
<TelerikDrawer TItem="int" @ref="@DrawerRef" @bind-Expanded="@DrawerExpanded" Mode="@DrawerMode.Push">
<Template>
<NavMenu/>
</Template>
<DrawerContent>
@Body
</DrawerContent>
</TelerikDrawer>
@code
{
private TelerikDrawer<int>? DrawerRef { get; set; }
private bool DrawerExpanded { get; set; } = true;
/// <remarks>
/// We can't toggle DrawerExpanded because that won't trigger the animation.
/// Only DrawerRef.ToggleAsync() triggers the animation.
/// </remarks>
private async Task ToggleDrawer() => await DrawerRef!.ToggleAsync();
}I would like to trigger the animation for the Drawer component by toggling the Expanded parameter and not calling ToggleAsync() on the reference to the Drawer component. Toggling the Expanded parameter instead of calling a function on a reference to a component is a cleaner, simpler approach that better aligns with the philosophy of Blazor (using parameters rather than properties or functions on reference to components). Furthermore, this approach is used by various other Blazor component libraries such as MudBlazor, SyncFusion, and DevExpress. See:
