Event Binding

In this lesson, we’re going to learn about template syntax. Templates in Angular are the HTML in your application, i.e., the presentation part of the application. We’re not limited to tags and attributes in a template. There’s additional syntax available to make the template more dynamic.

The template for the application can be found in the src/app directory under the file name app.component.html. It’ll contain the following:

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

Below the comments are hundreds of lines of HTML. As the comment suggests, we’re more than free to replace the template completely. Let’s replace it with a simple heading.

Note: The widget will only display the files mentioned in the lesson. If you’re interested in the complete code, then check out the lesson at the end of each section.