Book Image

Getting Started with Angular - Second edition - Second Edition

By : Minko Gechev
Book Image

Getting Started with Angular - Second edition - Second Edition

By: Minko Gechev

Overview of this book

Want to build quick and robust web applications with Angular? This book is the quickest way to get to grips with Angular and take advantage of all its new features.
Table of Contents (16 chapters)
Getting Started with Angular Second Edition
Credits
Foreword
About the Author
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface

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, which points to the app.html file. After that, we use the styles property; this is the first time...