add first component, and documentation

docs/thebasic.md

@@ -1,4 +1,4 @@
-## The Basic
+# The Basic
 
 Angular serves the **index.html** in the `src` directory and loads the components from the `src/app` directory.
 
@@ -16,4 +16,32 @@ When the app is builded, the angular cli will inject at the bottom a bundle of *
 
 
 Angular's main ideas is to build components to build an app. Each Component has it's own template (html), maybe it's own style (CSS) and more important it's own business logic.
-Components can be reused in multiple parts or the application.
+Components can be reused in multiple parts or the application.
+
+## Component
+
+The `app.component` is a special component. It serves to bootstrap all the application and is the root of the application. All the *selectors* for the other components are located now in the `app.component.html`.
+
+Good practice to create a new component, you should create a directory in the app folder and name it the same as the componentname. The convention of naming the component is like this `name.component.ts`. <br>
+A component is a class which angular is able to instanciate.
+
+Required files for a component are a `server.component.ts` and a `server.component.html`.
+
+In the *.ts file goes the logic and in the *.html file is the template of the component.
+
+```ts
+import { Component } from '@angular/core'; // Import for the Component-Decorator
+
+@Component({ // Decorator
+    selector: 'app-server', // Unique selector
+    templateUrl: './server.component.html' // template file
+})
+
+export class ServerComponent { // Component-Class
+
+}
+```
+
+This register the component and let angular know that a new component was created, it needs to be declared in the root app module (`app.module.ts`). Add it in the `declarations`-array and for TS to find the file, it needs also an import.
+
+<img src="../img/app-module.png" alt="app-module" width="600"/><br>

my-first-app/src/app/app.module.ts

@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
+import { ServerComponent } from './server/server.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    ServerComponent
   ],
   imports: [
     BrowserModule

my-first-app/src/app/server/server.component.html

@@ -0,0 +1 @@
+<p>Server Component</p>

my-first-app/src/app/server/server.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-server',
+    templateUrl: './server.component.html'
+})
+
+export class ServerComponent {
+
+}