Samples Automation

Every component will have sub-directory called demo. Every demo has its own class definition and html template. For the naming convention, the demo component should add "demo" as a prefix and an increment number as a suffix ex: demo.button-1.ts, demo.button-1.html, ...etc. Every demo should import the actual class of the component.

-src
   -app
      -components
       -exampleComponent
          -example.component.ts
          -example.component.html
          -example.component.css
          -demo
             -demo.example-1.ts
             -demo.example-1.html
             -demo.example-1.css
             -demo.example-2.ts
             -demo.example-2.html
             -demo.example-2.css

Let's take for an example a customized button developed called cf-button:

cf-button.component.ts

import { Component, Input } from '@angular/core';
@Component({
    selector: 'cf-button',
    templateUrl: './button.component.html',
    styleUrls: [ './button.component.css']
})
export class ButtonComponent {
   @Input() title: string;
}

button.component.html

/*html code*/
<button....></button>

demo.button-1.ts (Note that it is importing the component)

import { Component } from '@angular/core';
//Import the component from its relative path
import { ButtonComponent } from '../cfButtonComponent/cf-button.component';

@Component ({
   selector: 'cf-demo-button-1',
   templateUrl: './demo.button-1.html',
   styleUrls: [ './demo.button-1.css']
})
export class DemoButton1 {
   sampleTitle1: string = "Hello1";

}

demo.button-1.html

<h1> CF Button </h1>
<cf-button [title]="sampleTitle1"></cf-button>

demo.button-2.ts (Note that it is importing the component)

import { Component } from '@angular/core';
//Import the component from its relative path
import { ButtonComponent } from '../ButtonComponent/button.component';

@Component ({
   selector: 'cf-demo-button-2',
   templateUrl: './demo.button-2.html',
   styleUrls: [ './demo.button-2.css']
})
export class DemoButton2 {
   sampleTitle2: string = "Hello2";

}

demo.button-2.html

<h1> CF Button </h1>
<cf-button [title]="sampleTitle2"></cf-button>

Then the hosting Sample Component in the project should import the sample component:

host.component.ts

import { Component } from '@angular/core';

//Import the demo component from its relative path
import { DemoButton1 } from '../ButtonComponent/demo/demo.button-1';
import { DemoButton2 } from '../ButtonComponent/demo/demo.button-2';

@Component ({
   selector: 'sample-component',
   templateUrl: './sample.component.html',
   styleUrls: [ '.sample.component.css']
})
export class SampleComponent {
}

host.component.html

<h1> Basic Usage </h1>
<demo-button1></demo-button1>
<demo-button2></demo-button2>