button. We will call it Input-Button-Unit.
ng serve. Instead, we can open another terminal window or tab and run the additional commands from there. The changes will be reflected immediately in the browser.
ngis the command for using the Angular CLI.
gis a shorthand for
cis a shorthand for
input-button-unitis the name we give to the component.
src/app/input-button-unit. There are three files there (or four if you're not using inline-template):
input-button-unit.component.scss- this is where the style that's specific to the component will be placed.
input-button-unit.component.spec.ts- this is a file for testing the component. We will not deal with it in this tutorial.
input-button-unit.component.ts- this is the component file where we will define its logic.
input-button-unit.component.html- this is the HTML template file, if you're not using inline-template.
input-button-unit.component.ts. You can see that the Angular CLI has generated the component's configuration for us, including its selector, which is the name we gave preceded by the prefix
app, and a default template:
appwill be added to the component selector of all the components you will generate. This is to avoid name conflicts with other components and HTML elements. For instance, if you create a component named input it will not conflict with HTML's
<input />element, since its selector will be
appis the default prefix, which is good for your main application. However, if you're writing a library of components to be used in other projects, you should choose a different prefix. For example, the Angular Material library uses the prefix
mat. You can create a project stating the prefix of your choice using the flag
--prefix, or change it afterwards in the file
app.component.tsand add the app-input-button-unit tag inside the template (remember we refactored the root component to have an inline template):
titlemember which we will use as the todo item title:
title, since each component's content is encapsulated within it.