At some point you may need to dynamically create elements of mark-up in a Blazor application. For example, you might create a reusable class library for returning components, icons or the likes depending upon the user. <\/p>\n
Ofcourse we can do this from the @code<\/em> block within a page or we might prefer to simply return mark-up from a function.<\/p>\n Let’s look at a simple example method which, depending upon the id<\/em> sent to it returns a different icon, here’s an abridge snippet of the code<\/p>\n As you can see we return a RenderFragment<\/em> which is actually just a delegate which takes a RenderTreeBuilder<\/em> argument. From this builder<\/em> we create\/append a child component, the first value is a sequence (a position of the instructions in the source code) followed by the type of the child component to add.<\/p>\n If the case above, the HomeIcon<\/em> is an Icon from Skclusive.Material<\/em>, which is ultimately an Microsoft.AspNetCore.Components.IComponent<\/em>. <\/p>\n\r\npublic static RenderFragment GetIconForId(int id)\r\n{\r\n var iconType = typeof(ListIcon);\r\n switch (id)\r\n {\r\n case 0:\r\n iconType = typeof(HomeIcon);\r\n break;\r\n case 1:\r\n iconType = typeof(NotificationImportantIcon);\r\n break;\r\n \/\/ etc.\r\n }\r\n \r\n return builder =>\r\n {\r\n builder.OpenComponent(0, iconType);\r\n builder.CloseComponent();\r\n };\r\n}\r\n<\/pre>\n