This tutorial lesson demonstrates how to create a new component for your Angular app.
Time required: expect to spend about 10 minutes to complete this lesson.
This lesson starts with the code from the previous lesson, so you can:
If you haven't reviewed the introduction, visit the Introduction to Angular tutorial to make sure you have everything you need to complete this lesson.
If you have any trouble during this lesson, you can review the completed code for this lesson, in the live example for this lesson.
HomeComponent
.Angular apps are built around components, which are Angular's building blocks. Components contain the code, HTML layout, and CSS style information that provide the function and appearance of an element in the app. In Angular, components can contain other components. An app's functions and appearance can be divided and partitioned into components.
In Lesson 1, you updated the AppComponent
, whose function is to contain all the other components. In this lesson, you create a HomeComponent
to display the home page of the app. In later lessons, you create more components to provide more features to the app.
In Angular, components have metadata that define its properties. When you create your HomeComponent
, you use these properties:
selector
: to describe how Angular refers to the component in templates.standalone
: to describe whether the component requires a ngModule
.imports
: to describe the component's dependencies.template
: to describe the component's HTML markup and layout.styleUrls
: to list the URLs of the CSS files that the component uses in an array.Components have other properties, but these are the ones used by HomeComponent
.
Perform these steps on the app code in your IDE.
HomeComponent
In this step, you create a new component for your app.
In the Terminal pane of your IDE:
In your project directory, navigate to the first-app
directory.
Run this command to create a new HomeComponent
ng generate component Home --standalone --inline-template --skip-tests
Run this command to build and serve your app.
ng serve
Open a browser and navigate to http://localhost:4200
to find the application.
Confirm that the app builds without error.
Note: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet.
Leave ng serve
running as you complete the next steps.
In this step, you add the new component, HomeComponent
to your app's root component, AppComponent
, so that it displays in your app's layout.
In the Edit pane of your IDE:
Open app.component.ts
in the editor.
In app.component.ts
, import HomeComponent
by adding this line to the file level imports.
import { HomeComponent } from './home/home.component';
In app.component.ts
, in @Component
, update the imports
array property and add HomeComponent
.
imports: [ HomeComponent, ],
In app.component.ts
, in @Component
, update the template
property to include the following HTML code.
template: ` <main> <header class="brand-name"> <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true"> </header> <section class="content"> <app-home></app-home> </section> </main> `,
Save your changes to app.component.ts
.
If ng serve
is running, the app should update. If ng serve
is not running, start it again. Hello world in your app should change to home works! from the HomeComponent
.
Check the running app in the browser and confirm that the app has been updated.
HomeComponent
In this step you add features to HomeComponent
.
In the previous step, you added the default HomeComponent
to your app's template so its default HTML appeared in the app. In this step, you add a search filter and button that is used in a later lesson. For now, that's all that HomeComponent
has. Note that, this step just adds the search elements to the layout without any function, yet.
In the Edit pane of your IDE:
In the first-app
directory, open home.component.ts
in the editor.
In home.component.ts
, in @Component
, update the template
property with this code.
template: ` <section> <form> <input type="text" placeholder="Filter by city"> <button class="primary" type="button">Search</button> </form> </section> `,
Next, open home.component.css
in the editor and update the content with these styles.
.results { display: grid; column-gap: 14px; row-gap: 14px; grid-template-columns: repeat(auto-fill, minmax(400px, 400px)); margin-top: 50px; justify-content: space-around; } input[type="text"] { border: solid 1px var(--primary-color); padding: 10px; border-radius: 8px; margin-right: 4px; display: inline-block; width: 30%; } button { padding: 10px; border: solid 1px var(--primary-color); background: var(--primary-color); color: white; border-radius: 8px; } @media (min-width: 500px) and (max-width: 768px) { .results { grid-template-columns: repeat(2, 1fr); } input[type="text"] { width: 70%; } } @media (max-width: 499px) { .results { grid-template-columns: 1fr; } }
Confirm that the app builds without error. You should find the filter query box and button in your app and they should be styled. Correct any errors before you continue to the next step.
In this lesson, you created a new component for your app and gave it a filter edit control and button.
If you are having any trouble with this lesson, you can review the completed code for it in the live example.
For more information about the topics covered in this lesson, visit:
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/tutorial/first-app/first-app-lesson-02