mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
36 lines
2.7 KiB
Markdown
36 lines
2.7 KiB
Markdown
# 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
|
|
## Creating a component
|
|
Starting from the root of your project, run the following command into 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.
|
|
|
|
## 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.
|
|
- `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.
|
|
|
|
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.
|
|
|
|
import { MyFirstComponentComponent } from './my-first-component/my-first-component.component';
|
|
|
|
@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.
|