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 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:

index.html
...
<!-- 3. Display the application -->
  <body>
    <app-root>Loading...</app-root>
  </body>
...

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.

import { Component } from '@angular/core';

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

To make the connection more concrete

  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.

Did you forget the command to serve? You can find it Angular Cheat Sheet

You should have this error in your console.

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

src/app.component.ts
import { Component } from '@angular/core';

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

  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>.

PreviousModules ExplainedNextAngular Files

Last updated