Documented genericContainer. Linked to the docs from the examples in the bootstrapper.

Author: SamGraber

README.md

@@ -42,7 +42,7 @@ Angular components that can be added to an application.
 * [commaList](/source/components/commaList/commaList.md)
 * [dateTimeStatic](/source/components/dateTimeStatic/dateTimeStatic.md)
 * [dialog](/source/components/dialog/dialog.md)
-* [genericContainer]()
+* [genericContainer](/source/components/genericContainer/genericContainer.md)
 * [form](/source/components/form/form.md)
 * [lazyLoad](/source/components/lazyLoad/lazyLoad.md)
 * [messageLog]()

bootstrapper/bootstrapper.js

@@ -223,6 +223,9 @@
 	function MiscTestController($scope, $q, $timeout, dialog, cardContainerBuilderFactory) {
 		var self = this;
 		// Misc
+		self.myNum = 2;
+		self.myValue = 1;
+
 		self.validator = {
 			validate: function () {
 				return self.text === 'valid';

bootstrapper/misc.html

@@ -1,6 +1,16 @@
 <h3>Misc</h3>
 <div>
-	<label>Generic container:</label>
+	<label><a href="https://github.com/SamGraber/TypeScript-Angular-Components/blob/master/source/components/genericContainer/genericContainer.md">Generic container:</a></label>
+	<rl-radio-group ng-model="misc.myValue">
+		<rl-radio value="1">1</rl-radio>
+		<rl-radio value="2">2</rl-radio>
+		<rl-radio value="3">3</rl-radio>
+	</rl-radio-group>
+	<rl-generic-container selector="misc.myValue">
+		<template when-selector="1"><span>Template 1</span></template>
+		<template when-selector="{{misc.myNum}}"><span>Template 2</span></template>
+		<template default><span>Default</span></template>
+	</rl-generic-container>
 	<rl-checkbox ng-model="misc.toggle">Toggle</rl-checkbox>
 	<rl-generic-container selector="misc.toggle">
 		<template default>

source/components/genericContainer/genericContainer.md

@@ -0,0 +1,44 @@
+# Generic container
+A component that uses an expression to conditionally display a template. Functions similar to [`ng-switch`](https://docs.angularjs.org/api/ng/directive/ngSwitch) with the significant difference that expressions are supported in the `when` operators, where `ng-switch` only allows for primitive values.
+
+### Usage
+```
+<rl-generic-container selector="">
+	<template when-selector=""> ... </template>
+	<template default> ... </template>
+</rl-generic-container>
+```
+### Options
+
+#### `selector`
+An expression that evaluates to a string value representing the template that should be shown. If no match is found, the default is used.
+
+#### `when-selector`
+Specifies the value that the container should match against to determine if this template should be shown. Unlike `ng-switch`, interpolation is permitted.
+
+#### `default (default: false)`
+If specified, the specified template is used if no match is found. In this case, no `when-selector` need be specified.
+
+Template contents must be surrounded with an html tag to function correctly.
+
+### Full example
+```
+// myNum = 2
+<rl-generic-container selector="myValue">
+	<template when-selector="1">Template 1</template>
+	<template when-selector="{{myNum}}">Template 2</template>
+	<template default>Default</template>
+</rl-generic-container>
+```
+Output (myValue = 1):
+```
+<div id="container"><span>Template 1</span></div>
+```
+Output (myValue = 2):
+```
+<div id="container"><span>Template 2</span></div>
+```
+Output (myValue = 3):
+```
+<div id="container"><span>Default</span></div>
+```