Components

Component selector names(Style 05-02)

• Use dashed-case for naming the element selector of components.

• Use prefix wm in the selector name.

@Component({
  selector: 'wm-hero-button',
  templateUrl: './hero-button.component.html'
})
export class HeroButtonComponent { }

Components as elements (Style 05-03)

• Give components an element selector, as opposed to attribute or class selector. For example:

<!--ToHeroButton is not a component, it could be a directive!-->
<div toHeroButton />

Extract templates and styles to their own files (Style 05-04)

• Extract templates and styles into a separate file, when more than 3 lines.

• Every component file name should be:

  [ ControlName ].component.ts

• Every template file name should be:

  [ ControlName ].component.html

• Every style file name should be:

  [ ControlName ].component.css

Decorate input and output properties (Style 05-12)

• Use the @Input() and @Output class decorators instead of the inputs and outputs

Member sequence (Style 05-14)

• Place properties up top followed by methods.

• Place private members after public members, alphabetized.

Delegate complex component logic to services (Style 05-15)

• Limit logic in a component to only that required for the view.

• Move reusable logic to services and keep components simple and focused on their intended purpose.

Don't prefix output properties

• Name events without the prefix on.

• name event handler methods with the prefix on followed by the event name.

<wb-label (saveTheDay)="onSavedTheDay($event)" />>

export class HeroComponent {
  @Output() savedTheDay = new EventEmitter<boolean>();
}

Put presentation log in the component class

Put presentation logic in the component class and not in the template.

Components library folders

Each technology of components library has to be located in separate folders as KendoUI and base-components.

Each component must be contains three files:

• The html file that contains the template.

• The scss file that contains the component styles.

• The type script file that contains all component client logic.

• The test folder that contains: at least the spec file that contains all necessary tests for one component.

• The model with the properties to use.