Creating an Angular Component

Angular-CLI creates a component with all required configuration with a simple command; `ng g c name-of-your-component`. This will create the component bundled in a folder that has the same name with your component name.

The Component Class

Angular-CLI generated the component class in the typescript file. @Component decorator contains the connections for the template and the style files.

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

@Component({
  selector: 'app-test-component',
  templateUrl: './test-component.component.html',
  styleUrls: ['./test-component.component.css']
})
export class TestComponentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Other than the basic component features, this class is also implementing OnInit interface from Core library.

Angular-CLI also imported the new component and added it in declarations array of the AppModule.