How to Create a Component in Angular

Step 1: What is an Angular Component?

Angular components are the building blocks of any Angular application. They consist of code, HTML layout, and CSS styles that define the functionality and appearance of an element in your app. Components can also contain other components, making it easy to divide and organize the app’s functionality and appearance.

Each Angular component has metadata that describes its properties:

• selector: Defines how Angular refers to the component in templates.
• standalone: States whether the component requires an NgModule.
• imports: Specifies the dependencies the component needs.
• template: Defines the component’s HTML markup and layout.
• styleUrls: Lists the URLs of the CSS files the component uses.

Let’s break down the process of creating an Angular component in simple steps.

Step 1: Create the HomeComponent

First, you need to create a new component called HomeComponent for your Angular app.

1. Open the terminal in your IDE and navigate to your project’s directory.
2. Run the following command to create a new component:

ng generate component home --inline-template --skip-tests

Build and serve your app by running:

ng serve

Open your browser and navigate to http://localhost:4200. You should see your app running, and confirm that there are no errors. Although you’ve added a new component, you haven’t included it in the app’s templates yet.

Step 2: Add the HomeComponent to Your App’s Layout

Now, let’s include the newly created HomeComponent in your app’s layout.

1. Open app.component.ts in your IDE.
2. Import the HomeComponent by adding this line:

import { HomeComponent } from './home/home.component';

Add HomeComponent to the imports array in @Component:

imports: [
  HomeComponent,
],

Update the template property in app.component.ts to display the HomeComponent:

template: `
  <main>
    <header class="brand-name">
      <img class="brand-logo" src="/assets/logo.svg" alt="logo">
    </header>
    <section class="content">
      <app-home></app-home>
    </section>
  </main>
`,

Save your changes and check the browser. The page should now show the HomeComponent with the message “home works!” confirming it’s been added correctly.

Step 3: Add Features to the HomeComponent

Now that the HomeComponent is displayed, we can add a search filter and button.

1. Open home.component.ts and replace the template property with the following:

template: `
  <section>
    <form>
      <input type="text" placeholder="Filter by city">
      <button class="primary" type="button">Search</button>
    </form>
  </section>
`,

Open home.component.css and style the component:

.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 (max-width: 499px) {
  .results {
    grid-template-columns: 1fr;
  }
}

Save your changes and confirm that your app builds without any errors. You should see the search filter box and button styled correctly in your app.

In these simple steps, you’ve learned how to create and add a new component in Angular. By dividing your app into components, you can easily manage its functionality and appearance. You’ve also added basic features to the HomeComponent, which can be expanded in future lessons. Components are crucial for making your Angular app scalable and easy to maintain.