Updated the existing tutorials and added another about Using components. (#3191)

This commit is contained in:
Francesco Corti
2018-04-16 13:23:46 +02:00
committed by Eugenio Romano
parent eff3ea83b0
commit 68df6138c4
6 changed files with 142 additions and 77 deletions

View File

@@ -1,13 +1,8 @@
---
Level: Beginner
---
# Adding a new component
By definition a *component* controls a patch of screen called a view. As an example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion of layout of an application. In this tutorial you will learn how to create a component using [Angular CLI](https://cli.angular.io/). After the creation you will learn how to add it to an existing application.
## Creating a component
Starting from the root of your project, run the following command into a terminal.
ng generate component my-first-component
@@ -15,13 +10,11 @@ Starting from the root of your project, run the following command into a termina
If you are adding the component to an application with more than one module, you might want to specify it using the `--module` parameter. For example use `--module app` to add the new component to the root app of your application.
## Using the component
Once done, wherever you will use `<app-my-first-component></app-my-first-component>` into the HTML file of another component, you will see the content of the new component rendered exactly in that place.
As an example, add `<app-my-first-component></app-my-first-component>` on top of the `app.component.html` file stored into the `src` folder, and run the application again. Directly in the browser you will see `my-first-component works!`, that shows exactly the place where the component is rendered in the layout.
## Anatomy of the component
By default the new component is created into the `src/app` path and everything is stored in a folder named like the component itself. In this example a folder named with `my-first-component` is added to `src/app`, with inside the following content:
- `my-first-component.component.scss` containing the CSS used by the component. This file is created as empty.
@@ -31,15 +24,12 @@ By default the new component is created into the `src/app` path and everything i
To make the component usable, one or more modules should declare it (or import it). In this example the `app.module.ts` file stored into the `src/app` folder contains the following code.
```ts
import { MyFirstComponentComponent } from './my-first-component/my-first-component.component';
@NgModule({
declarations: [
...
...
MyFirstComponentComponent
],
```
These are the very basic information you should be know about your brand new component. All you have read here is standard Angular, not customised or valid for ADF applications only.