It is better to put all files in a new folder named with a meaningful name, such as : server
first name component.ts file, which name is normally folder’s name, such as: server.component.ts
Component is just Class, angular could instantiate it to create objects
in order to let angular understand this class, it should use component decorator @Component({}) to input more information
also you have to use import { Component } from ‘@angular/core’ statement to import Component methods to make sure angular can use @Component() method
The argument of @Component is object, which should at least include: selector, templateUrl, or maybe styleUrls
CLI create component: ng generate component component-name
also could use: ng g c component-name
templateUrl: connect to the external html file, however, you can use template: where you can write your html directly, such as template: ‘<app-server></app-server>’
styleUrls:[], connect to external CSS files, however, you can use styles:[], where you can write you css directly
selector: this is element you created for using in the html files. Normally, selector: ‘app-server’, which means you can use <app-server></app-server> element to render content.
however, you also can create selector as attribute like this: selector: ‘[app-server]’, which means you can use: <div app-server></div> to get the same results as 5
also, you can create selector as class like this: selector: ‘.app-server’, which means you can use : <div class=”app-server”></div> to get the same result as 5