# App Component

## **Components**

Components are the basic building blocks of an Angular 2 app. They're reusable units of code that contain both visible front-end information to render to the user and any necessary back-end logic the elements it renders may require. Everything in Angular 2 is a component, including any navbar, sidebar and content.

Every Angular application requires at least one component called a root component. All other components will reside in this primary root component. An application may only have one root component.

**Other Resources**

* [**Component Architecture Cheat Sheet**](https://www.tutorialspoint.com/angular2/angular2_components.htm)
* [**Coursetro Component Video Lesson**](https://coursetro.com/posts/code/56/Angular-4-Components-Tutorial)

#### **Component HTML Tags**

We'll include tags where we'd like our root component to be located in **src/index.html.** It's common practice to place it directly within **\<body>**, like this:

{% code title="index.html" %}
```typescript
...
<!-- 3. Display the application -->
  <body>
    <app-root>Loading...</app-root>
  </body>
...
```
{% endcode %}

As you may have guessed, **\<app-root>** is not a standard HTML tag. This is a custom selector tag that refers to a particular component. It tells Angular where our component should be rendered. Once we finish creating it, our root component will load its template HTML between the **\<app-root>** tags included above. (The tag name does not have to be app-root specifically. See more below.) If you look at your app.component.ts where it says selector.

{% tabs %}
{% tab title="src/app.component.ts" %}
```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',  (1)
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}
```
{% endtab %}

{% tab title="index.html" %}
```
...
<!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
...

```
{% endtab %}
{% endtabs %}

To make the connection more concrete&#x20;

1. Change the **\<app-root> \</app-root>** selector to be my to a new html element selector **\<my-app> \</my-app>**
2. Save the file and the application should compile then check your console in the browser where your app was running.
3. Open console on chrome dev tools right click hit inspect or mac CMD + Option + J.

{% hint style="info" %}
**Did you forget the command to serve?** You can find it [**Angular Cheat Sheet**](../../../../angular-cheat-sheet#useful-cli-commands)
{% endhint %}

**You should have this error in your console.**

![Running the Application](https://lh3.googleusercontent.com/rSL9VqQ0qXfCcDI-vCugcRkNNw4pflkQFTPv1qmGY2Ml5vYhTYxZYbfctJV1we141AECIdoO2qpuZlZGS_F1TWKStwm4FzEzuU3n8dKHpWf1xmC3a8eWov93QByXIkee5Hyyn5Hb)

\
This a **run time error** your app can have errors during compile, think of the typescript lesson or now during run time in which case they will appear in your browser’s console. This error is telling us it cannot find the selector **\<app-root>**\


#### Back in your app.component.ts fix the selector to be: my-app 

{% code title="src/app.component.ts" %}
```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'my-app', (1)
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}
```
{% endcode %}

1. We changed the **selector** from **app-root** to **my-app**

The app should recompile and load successfully, check in your browser. Inspect the application again in chrome dev tools and find your selector **\<my-app>.**&#x20;
