inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2679] Reviewed tutorials (#3254)

Browse Source 
* [ADF_2679] Reviewed tutorial text

* [ADF-2679] Reviewed tutorials

* [ADF-2679] Fixed glitches in index page
This commit is contained in:
Andy Stark
2018-05-02 16:43:47 +01:00
committed by Eugenio Romano
parent ebfc40b1c8
commit 8037d4c76c
8 changed files with 681 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
docs/tutorials/new-component.md
View File

@@ -1,35 +1,59 @@
---
Level: Basic
---
# 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.
v
By definition, a *component* controls a patch of screen called a *view*. For example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion ofan application's layout. In this tutorial, you will learn how to create a component using [Angular CLI](https://cli.angular.io/) within an existing application.
## Creating a component
Starting from the root of your project, run the following command into a terminal.
Starting from the root of your project, run the following command in a terminal:
ng generate component my-first-component
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.
Once the component is created, you can use the element
```html
<app-my-first-component></app-my-first-component>
```
anywhere within the HTML file of another component to render the content of `my-first-component`.
As an example, add `<app-my-first-component></app-my-first-component>` at the top of the
`app.component.html` file in the `src` folder, and run the application again. In the browser you will
shortly see the text "my-first-component works!", as a placeholder to show 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.
- `my-first-component.component.html` containing the HTML used to render the component. This file is created with a very basic message rendering the name of the component included in a `p` tag.
By default the new component is created in the `src/app` path and everything is stored in a folder with the
same name as the component itself. Here, you should find a folder named `my-first-component` has been added
to `src/app`, with the following contents:
- `my-first-component.component.scss` containing the CSS used by the component, initially empty.
- `my-first-component.component.html` containing the HTML used to render the component. This file is
created with a very basic placeholder message that displays the name of the component within a `p` tag.
- `my-first-component.component.spec.ts` containing the unit tests for the component.
- `my-first-component.component.ts` containing the `MyFirstComponentComponent` class implementing the business logic in typescript.
- `my-first-component.component.ts` containing the `MyFirstComponentComponent` class that implements the
business logic in typescript.
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.
You must declare or import the component in one or more modules in order to use it. In this example the
`app.module.ts` file stored in `src/app` contains the following code:
import { MyFirstComponentComponent } from './my-first-component/my-first-component.component';
```ts
import { MyFirstComponentComponent } from './my-first-component/my-first-component.component';
@NgModule({
declarations: [
...
MyFirstComponentComponent
],
@NgModule({
declarations: [
...
MyFirstComponentComponent
],
```
These are the very basic information you should know about your brand new component. All you have read here is standard Angular, not customised or valid for ADF applications only.
These is the most basic information you need to know about your component. Everything mentioned here is
standard Angular code without anything specific to ADF applications.