diff --git a/docs/thebasic.md b/docs/thebasic.md index 659dd0a..aa00dcc 100644 --- a/docs/thebasic.md +++ b/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`.
+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. -app-module
\ No newline at end of file +app-module
+ +By adding the component-Tag to the `app.component.html` the component will be inbedded in the app. + +```html + +``` + +A component can be created with the ancular CLI +```bash +# long +ng generate component + +# short +ng g c +``` + +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*: + +app-servers
+ +### Selector + +Angular have multiple ways to select the component (CSS-Selectors): +- by element `` +- by attribute `[app-server]` +- by class `.app-server` + +## Databinding + +What is Databinding? Communication between TS-Code (Businessloginc) and the Template (HTML). + +databinding
\ No newline at end of file diff --git a/img/databinding.png b/img/databinding.png new file mode 100644 index 0000000..e9f8fc1 Binary files /dev/null and b/img/databinding.png differ diff --git a/img/serversComponent.png b/img/serversComponent.png new file mode 100644 index 0000000..3e7c4a1 Binary files /dev/null and b/img/serversComponent.png differ