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', }