update documentation 🖹

docs/thebasic.md

@@ -22,7 +22,8 @@ Components can be reused in multiple parts or the application.
 
 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>
+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`. 
+
 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`.
@@ -44,4 +45,38 @@ 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>
+<img src="../img/app-module.png" alt="app-module" width="600"/><br>
+
+By adding the component-Tag to the `app.component.html` the component will be inbedded in the app.
+
+```html
+<app-server></app-server>
+```
+
+A component can be created with the ancular CLI
+```bash
+# long
+ng generate component <name>
+
+# short
+ng g c <name>
+```
+
+This command will create a new folder and automatically update the `app.module`.
+
+A component can be Nested. *Server* will be moved to the *Servers*. So that in the Dom we finde a wrapper arround the *Server-Component*:
+
+<img src="../img/serversComponent.png" alt="app-servers" width="650"/><br>
+
+### Selector
+
+Angular have multiple ways to select the component (CSS-Selectors):
+- by element `<app-server></app-server>`
+- by attribute `[app-server]`
+- by class `.app-server`
+
+## Databinding
+
+What is Databinding? Communication between TS-Code (Businessloginc) and the Template (HTML).
+
+<img src="../img/databinding.png" alt="databinding" width="650"/><br>