Angular: New component

Components can be created from cli by running ng generate component servers or ng g c servers where servers is name of component.

Here we will describe how to it manually. Component is basicaly a typescript class. We will create new component called server.

Create src/app/server/server.component.ts

import { Component } from '@angular/core';
@Component({
	selector: 'app-server',
	templateUrl: './server.component.html'
})
export class ServerComponent {
	serverId = 10;
	serverStatus = 'offline';
}

import will import component decorator
@Component is decorator - typescript feature which will enhance our class
selector is selector by which we will identify it and use in other component templates (html files)

Create src/app/server/server.component.html

 <p>Server with id {{serverId}} is {{serverStatus}}</p>

In src/app/app.module.ts

import { ServerComponent } from './server/server.component';

@NgModule({
	declarations: [
	   AppComponent,
	   ServerComponent
	]
	...
})

In src/app/app.component.html

  <app-server></app-server>