Getting Started with Angular - Second Edition

Creating custom Angular components

Now, let's build a simple to-do application in order to demonstrate the syntax to define components further.

Our to-do items will have the following format:

interface Todo { 
  completed: boolean; 
  label: string; 
} 

Let's start by importing everything we will need:

import {Component, NgModule, ViewEncapsulation} from '@angular/core'; 
//...

Now, let's declare the component and the metadata associated with it:

@Component({ 
  selector: 'todo-app', 
  templateUrl: './app.html', 
  styles: [ 
    `ul li { 
      list-style: none; 
    } 
    .completed { 
      text-decoration: line-through; 
    }` 
  ], 
  encapsulation: ViewEncapsulation.Emulated 
}) 

Here, we specify that the selector of the Todo component will be the todo-app element. Later, we add the template URL, ...