How to use the @storybook/addon-knobs/angular.text function in @storybook/addon-knobs

[showSelectionColumn]="showSelectionColumn"
				[striped]="striped">
				<div>No data.</div>
			
		
		`,
		styles: [`
			.no-data {
				width: 100%;
				height: 150px;
				text-align: center;
			}
		`],
		props: getProps({
			model: emptyModel,
			description: text("Description", "With no data")
		})
	}))
	.add("With toolbar", () =&gt; ({

[onText]="altOnText"
				[offText]="altOffText"
				[disabled]="disabled"
				[checked]="checked"
				[size]="size">
			
		`,
		props: {
			disabled: boolean("Disabled", false),
			checked: boolean("Checked", false),
			size: select("Size", ["md", "sm"], "md"),
			label: text("Label text", ""),
			onText: text("On text", "On"),
			offText: text("Off text", "Off"),
			altOffText: text("Alternative off text", "Dark"),
			altOnText: text("Alternative on text", "Light")
		}
	}))
	.add("Skeleton", () => ({

.add("Passive", () => ({
		template: `
		
		
		
		`,
		props: {
			modalType: select("modalType", ["default", "danger"], "default"),
			modalLabel: text("modalLabel", "optional label"),
			modalTitle: text("modalTitle", "Passive modal title"),
			modalContent: text("modalContent", "Passive modal notifications should only appear if there is an action " +
				"the user needs to address immediately. Passive modal notifications are persistent on screen")
		}
	}))
	.add("Documentation", () => ({

[value]="value"
			[shiftMultiplier]="shiftMultiplier"
			[disabled]="disabled"
			(valueChange)="valueChange($event)">
			<span>{{minLabel}}</span>
			<span>{{maxLabel}}</span>
			<input>
		
	`,
	props: {
		min: number("min", 0),
		max: number("max", 100),
		step: number("step", 1),
		value: number("value", 0),
		label: text("Label text", "Slider Label"),
		minLabel: text("minLabel", "0"),
		maxLabel: text("maxLabel", "100"),
		theme: select("Theme", ["dark", "light"], "dark"),
		disabled: boolean("disabled", false),
		shiftMultiplier: number("shiftMultiplier", 4),
		valueChange: action("Value changed")
	}
}))
.add("With NgModel", () =&gt; ({

[dateFormat]="dateFormat"
						(valueChange)="valueChange($event)">
					
				
				Tab Content 3
			
		`,
		props: {
			valueChange: action("Date change fired!"),
			theme: select("Theme", ["dark", "light"], "dark"),
			label: text("Label text", "Date Picker Label"),
			placeholder: text("Placeholder text", "mm/dd/yyyy"),
			invalidText: text("Form validation content", "Invalid date format"),
			invalid: boolean("Show form validation", false),
			disabled: boolean("Disabled", false),
			dateFormat: text("Date format", "m/d/Y"),
			value: array("Value", ["10/19/2019"])
		}
	}))
	.add("Skeleton", () => ({

[shiftMultiplier]="shiftMultiplier"
			[disabled]="disabled"
			(valueChange)="valueChange($event)">
			<span>{{minLabel}}</span>
			<span>{{maxLabel}}</span>
			<input>
		
	`,
	props: {
		min: number("min", 0),
		max: number("max", 100),
		step: number("step", 1),
		value: number("value", 0),
		label: text("Label text", "Slider Label"),
		minLabel: text("minLabel", "0"),
		maxLabel: text("maxLabel", "100"),
		theme: select("Theme", ["dark", "light"], "dark"),
		disabled: boolean("disabled", false),
		shiftMultiplier: number("shiftMultiplier", 4),
		valueChange: action("Value changed")
	}
}))
.add("With NgModel", () =&gt; ({

range="true"
			[placeholder]="placeholder"
			[theme]="theme"
			[disabled]="disabled"
			[invalid]="invalid"
			[invalidText]="invalidText"
			[dateFormat]="dateFormat"
			(valueChange)="valueChange($event)">
		
		`,
		props: {
			valueChange: action("Date change fired!"),
			theme: select("Theme", ["dark", "light"], "dark"),
			label: text("Label text", "Date Picker Label"),
			placeholder: text("Placeholder text", "mm/dd/yyyy"),
			invalidText: text("Form validation content", "Invalid date format"),
			invalid: boolean("Show form validation", false),
			disabled: boolean("Disabled", false),
			dateFormat: text("Date format", "m/d/Y"),
			value: array("Value", ["09/19/2019", "10/19/2019"])
		}
	}))
	.add("With reactive forms", () => ({

.add("Basic", () => ({
		template: `
			
			<button>Toggle state</button>
		`,
		props: {
			onSuccess: action("onSuccess"),
			loadingText: text("The loading text", "Loading data..."),
			successText: text("The success text", "Data loaded.")
		}
	}))
	.add("Documentation", () =&gt; ({

`,
		props: {
			disabled: boolean("Disabled", false),
			checked: boolean("Checked", false),
			size: select("Size", ["md", "sm"], "md"),
			label: text("Label text", ""),
			onText: text("On text", "On"),
			offText: text("Off text", "Off"),
			altOffText: text("Alternative off text", "Dark"),
			altOnText: text("Alternative on text", "Light")
		}
	}))
	.add("Skeleton", () => ({

template: `
		
			
				<h4>{{title}}</h4>
				<p>{{description}}</p>
			
			
			
		
		`,
		props: getProps({
			description: text("Description", "With dynamic content")
		})
	}))
	.add("With overflow menu", () =&gt; ({