Adding a new component

In this tutorial, you will learn how to create a component using Angular CLI within an existing application.

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 of an application's layout.

Creating a component

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 the component is created, you can use the element

<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 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 that implements the business logic in typescript.

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';

@NgModule({
    declarations: [
        ...
        MyFirstComponentComponent
    ],

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.