Closed JorisSchelfaut closed 3 months ago
Instead of using
template:`
<section>
<form>
<input type="text" placeholder="Filter by city" />
<button class="primary" type="button">Search</button>
</form>
</section>
`
I added the HTML code directly to home.component.html
<section>
<form>
<input type="text" placeholder="Filter by city" />
<button class="primary" type="button">Search</button>
</form>
</section>
Cf. https://angular.dev/tutorials/first-app/02-HomeComponent
This tutorial lesson demonstrates how to create a new component for your Angular app.
Conceptual preview of Angular components
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 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.Learn more about Components
1. Create the HomeComponent
In this step, you create a new component for your app.
In the Terminal pane of your IDE:
2. Add the new component to your app's layout
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:
3. Add features to 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 functionality, yet.
In the Edit pane of your IDE: