Stackblitz support instructions

Mandatory requirements

1. Selectors end with -example
2. If there is a css associated to the example, it is in a scss file and not inline.
3. Make sure all filenames end with -example
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

Possibilities

Only HTML document is displayed and it has its own ts 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
}

3. HTML and typescript are displayed

{
Language: 'html'
fileName: 'name-of-file-example'
code: nameOfExampleHtml
scssFileCode: nameOfExampleScss
},
{
Language: 'typescript'
Component: 'nameOfComponentInTsFile'
fileName: nameOfTsFile-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'
},
{
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'
},
{
language: 'typescript',
code: customModule,
name: 'Module',
module: 'app.module.ts',
}