Angular Zero: Creating and Using Basic Components

In the previous chapter, we successfully set up the Angular development environment and created our first Angular project. Now, let’s dive deeper into the core building blocks of Angular applications—components.

What Is a Component?

A component is the fundamental building block of an Angular application. Each component is a self-contained, reusable unit of code—typically comprising an HTML template, styles, and class logic. Components help us break down complex user interfaces into smaller, manageable pieces.

Creating a Component

In Angular, you can quickly generate a new component using the Angular CLI. For example, to create a component named hello, run the following command from your project’s root directory:

ng generate component hello

Or use the shorthand version:

ng g c hello

After executing this command, the Angular CLI generates a hello folder under src/app, containing the following files:

• hello.component.ts: The component’s TypeScript logic
• hello.component.html: The component’s HTML template
• hello.component.css: The component’s styles
• hello.component.spec.ts: The unit test file

The generated component code looks like this:

hello.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  message: string = 'Hello, Angular!';
}

hello.component.html

<h1>{{ message }}</h1>

hello.component.css

h1 {
  color: blue;
}

This simple component defines a class with a message property and displays it in the template using the {{ message }} interpolation expression.

Using a Component

To use the newly created hello component in your application, reference it in a parent component’s template—typically app.component.html. Add the following line to app.component.html:

<app-hello></app-hello>

Now, when you run the application, you should see “Hello, Angular!” rendered in blue.

Running the Application

Ensure your development server is running. In your terminal, execute:

ng serve

Then open your browser and navigate to http://localhost:4200/. You’ll see your hello component rendered correctly.

Interacting Between Components

In real-world development, interaction between components is essential. You can pass data between parent and child components using the @Input() and @Output() decorators.

Passing Data from Parent to Child

Suppose we want the parent component to pass a greeting message to the hello component. First, add an @Input() property to the hello component’s class definition.

Update hello.component.ts:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  @Input() greeting: string = 'Hello from Parent!';
}

Next, define the value to be passed in app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  greetingMessage: string = 'Hello, Angular from Parent!';
}

Finally, bind the value to the child component in app.component.html:

<app-hello [greeting]="greetingMessage"></app-hello>

And update hello.component.html accordingly:

<h1>{{ greeting }}</h1>

Testing the Component

When you run the application again, the content of greetingMessage will be displayed inside the hello component.

Conclusion

In this chapter, we created a basic Angular component and used it within a parent component. We also explored how a parent component can pass data to a child component via property binding.

In the next chapter, we’ll delve deeper into component templates and styling to further enhance component functionality and presentation.