Lesson Monday

Let's take a look at the class annotation of our root component in more depth:

app/app.component.ts
...
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
...
  • @Component is known as a decorator. Decorators are special pieces of syntax that configure elements, such as components and modules. The decorator above tells Angular that the code following it defines a new component and should therefore have the functionalities outlined by Angular's own Component code imported at the top of the file. If you'd like to read more about Decorators, check out this blog post, "A deep dive on Angular decorators" by Front-end developer Todd Motto.

  • selector: 'app-root' determines where the component should be rendered. Let's take a quick look at src/index.html, which Angular CLI generated for us:

src/index.html
...
  <body>
    <app-root>Loading...</app-root>
  </body>
...

This HTML file has a special tag: <app-root></app-root>. The "Loading…" text inside these tags will be displayed in the short period of time between loading index.html and then rendering the <app-root> component.

As you may have guessed, <app-root> is not a standard HTML tag. This is a custom selector tag that refers to our root component. It matches the selector in our root component's annotation. We can change the tags if we want, but if we do so, we also have to change it in the selector of the class annotation. For instance, if we change the selector to super-crazy-component, we'd change the tag from <app-root> to <super-crazy-component>.

  • The templateUrl portion specifies the HTML that will be displayed wherever the component is placed. Specifically, we specify that the HTML inside app.component.html will go inside the <app-root></app-root tags in our index.html file.

  • We also have styleUrls; this is where we can link in specific stylesheets for this HTML. Note that it's an array. This means we can potentially link multiple stylesheets.

Let's make some modifications to each of these properties. First, go to the root directory of the project and run $ ng serve. This will serve our project and essentially do the same thing we've done with $ npm start the past few weeks. Now navigate to http://localhost:4200/.

The home page should say "App works!" That comes from our app.component.html file. Let's make a small change to that file:

app/app.component.html
<h1>To Do List</h1>
<h3>Epicodus Angular Homework</h3>

Now if you save, the live development server will update with our changes.

Let's also make a quick change to our CSS:

app/app.component.css
h1 {
  color: green;
}

Now if we refresh our page, the header will turn green.

Finally, let's try changing the selector. Change it to a name of your choice (such as crazy-app-selector) in your root component's annotation. When you refresh the page, you'll see that the root component is no longer being rendered. Now update the selector tags in index.html to match the selector in your root component. The page should render again.

And that's everything you need to know (for now) about an Angular application's annotation! In the next lesson, we'll start adding more code to our class declaration.