4/17/2017 - 8:43 PM

Create component

Components Documentation

Create Component manually

In this example we will create server component.

Create directory in /src/app named with component name: server.

Create TypeScript file

Create Typescript file for component in server directory: server.component.ts

Create class:

export class ServerComponent {

Add @Component() decorator to the class from @angular/core.

Add configuration to @Component() decorator:

  • selector (use custom tag, attribute or class)
  • template url (with relative path) or template (for inline markup)
  • links to CSS styles or inline style
  selector: 'app-server',
  styleUrls: ['./server.component.css']
  templateUrl: './server.component.html'

  selector: 'app-server',
  styles: ['h1 { font-weight: normal; }']
  template: '<h1>Header</h1>'

Create Template file

Add server.component.html to /src/app/server directory.

Configure module to use component

Add component class to declarations property of @NgModule decorator.

Use component selector in parent component's template


Create Component with CLI

ng g c client