Introduction to Templated Components

Overview

A modal dialog is a dialog that appears on top of all other content in a window and requires user interaction to close it. Templated components are components that accept one or more UI templates as parameters. The UI templates can contain any Razor markup.

In this chapter, we will learn about RenderFragment parameters, EventCallback parameters, and CSS isolation. RenderFragment parameters are used when a parent component needs to share information with a child component, and conversely, EventCallback parameters are used when a child component needs to share information with its parent component. We will also learn how to apply styles to only a single component by using CSS isolation.

We will create a modal dialog component. The component will be a templated component that can render different HTML based on the contents of its parameters. It will use event callbacks to return events back to the calling component. It will use CSS isolation to add the formatting that will make it behave like a modal dialog. Finally, we will move the component to a Razor class library so that it can be shared with other projects.

In this chapter, we will cover the following topics:

• RenderFragment parameters

• EventCallback parameters

• CSS isolation

• Creating a Razor class library

• Creating the modal dialog project