Mandatory requirements

1. Selectors end with -example (* New - Not anymore)
2. If there is a css associated to the example, it is in a scss file and not inline. (* New styles can be inline - second option is not available in this case )
3. Make sure all filenames end with -example (* New - Not anymore)
4. If and only if all components contain just the templateUrl and selector are they allowed to be in the same .ts file. Otherwise place them in their own typescript files.
5. Make sure the selector corresponds to the filename

Steps

1. Add the example to the component’s docs.html and be sure to give the Example File a name
2. Go to the docs folder of the example component you are in.
3. Go to the array of Example Files
4. Import all files using import * as nameUsedInExampleFile from '!raw-loader!./pathToFile 5. Make sure the secondary files and tertiary .ts files are placed in the order below (* NEW - Remove)

Possibilities

Only HTML document is displayed and it has its own ts file, (*NEW if there is anything in TS file instead of empty file)

{
language: 'html'
fileName: 'name-of-file-example'
code: nameOfExampleHtml 
component: 'nameOfComponentInTsFile'
typescriptFileCode: nameOfExampleTs 
scssFileCode: nameOfExampleScss //if applicable
}

2. Only HTML document is displayed and it shares a TS file

{
language: 'html'
fileName: 'name-of-file-example'
code: nameOfExampleHtml
component: 'nameOfComponentInTsFile'
second-file: 'nameOfTsFileThatSharesCode'
typescriptFileCode: nameOfExampleTs
scssFileCode: nameOfExampleScss
}

2 NEW. Only HTML Document is displayed and TS file is empty and there is not need to put it inside stackblitz (empty ts file will be created automatically)

{
language: 'html'
fileName: 'name-of-file-example'
code: nameOfExampleHtml
scssFileCode: nameOfExampleScss //If needed
}

3. HTML and typescript are displayed

{
language: 'html'
fileName: 'name-of-file-example'
code: nameOfExampleHtml
scssFileCode: nameOfExampleScss //IF needed
},
{
language: 'typescript'
component: 'NameOfComponentInTsFile'
fileName: name-of-file-example
code: nameOfExampleTs
}

4. 2+ Typescript + Module +HTML (optional)

When Modules require more than one component or any specific adding not given from the default, create a module file and link it.

{
language: ‘html’
fileName: ‘name-of-file-example’
code: nameOfExampleHtml
scssFileCode: nameOfExampleScss //if applicable
},
{
language: 'typescript',
code: nameOfExampleTs,
name: ‘Name Displayed On site',
thirdFile: ‘filename-3—example’,
fileName: 'filename-3—example',
component: 'nameOfThirdComponent'
imports: 'all extra imports needed'(using backticks)
declarationArray: 'All extra components'
(if needed) entryComponent: 'list of entry components'
},
{
language: 'typescript',
code: nameOfExampleTs,
name: 'Name Displayed On site',
secondFile: 'second-example',
fileName: 'second-example',
component: 'nameOfSecondComponent'
},
{
language: 'typescript',
code: nameOfExampleTs,
fileName: ‘main-typescript-example',
component: 'MainComponent'
}

4 NEW - When there is more than 1 typescript file

{
language: ‘html’
fileName: ‘name-of-file-example’
code: codeOfHtml
scssFileCode: nameOfExampleScss //if applicable
},
{
language: 'typescript',
code: codeOfMainExampleTs,
fileName: ‘main-typescript-example',
component: 'MainComponent',
main: true
},
{
language: 'typescript',
code: codeOfThirdExampleTs,
name: 'Name Displayed On site',
fileName: 'second-example',
component: 'nameOfSecondComponent',
entryComponent: true // IF needed (false by default)
},
{
language: 'typescript',
code: codeOfThirdExampleTs,
name: ‘Name Displayed On site',
fileName: 'third—example',
component: 'nameOfThirdComponent'
entryComponent: true // IF needed (false by default)
},