Index

There are two examples in here: - TodoEmbeddable - TodoRefEmbeddable

# TodoEmbeddable

The first example you should review is the HelloWorldEmbeddable. That is as basic an embeddable as you can get. This embeddable is the next step up - an embeddable that renders dynamic input data. The data is simple: - a required task string - an optional title - an optional icon string - an optional search string

It also has output data, which is hasMatch - whether or not the search string has matched any input data.

hasMatch is a better fit for output data than input data, because it's state that is derived from input data.

For example, if it was input data, you could create a TodoEmbeddable with input like this:

 todoEmbeddableFactory.create({ task: 'take out the garabage', search: 'garbage', hasMatch: false });

That's wrong because there is actually a match from the search string inside the task.

The TodoEmbeddable component itself doesn't do anything with the hasMatch variable other than set it, but if you check out SearchableListContainer, you can see an example where this output data is being used.

TodoRefEmbeddable

This is an example of an embeddable based off of a saved object. The input is just the savedObjectId and the search string. It has even more output parameters, and this time, it does read it's own output parameters in order to calculate hasMatch.

Output:

{ 
  hasMatch: boolean,
  savedAttributes?: TodoSavedAttributes
}

savedAttributes is optional because it's possible a TodoSavedObject could not be found with the given savedObjectId.