Angular 2 Components A simple component


To create a component we add @Component decorator in a class passing some parameters:

  • providers: Resources that will be injected into the component constructor
  • selector: The query selector that will find the element in the HTML and replace by the component
  • styles: Inline styles. NOTE: DO NOT use this parameter with require, it works on development but when you build the application in production all your styles are lost
  • styleUrls: Array of path to style files
  • template: String that contains your HTML
  • templateUrl: Path to a HTML file

There are other parameters you can configure, but the listed ones are what you will use the most.

A simple example:

import { Component } from '@angular/core';
  selector: 'app-required',
  styleUrls: ['required.component.scss'],
  // template: `This field is required.`,
  templateUrl: 'required.component.html',
export class RequiredComponent { }