Building Reusable Angular Components with Input and Output Properties

Angular is a popular framework for building dynamic and interactive web applications. One of the key features of Angular is its component-based architecture, which allows developers to create reusable UI components.

In this tutorial, we will explore how to create reusable Angular components with input and output properties, which can be easily customized and used across multiple applications.

Creating a Reusable Angular Component

Let's start by creating a simple Angular component. Open up your terminal and navigate to your project directory. Run the following command to create a new Angular component:

ng generate component my-component

Open up the my-component.component.ts file and add the following code:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  title = 'My Component';
}

In this code, we have defined a new Angular component called MyComponentComponent. We have also defined a class property called title, which we will use to display the title of the component in the template.

Next, let's update the template file (my-component.component.html) to display the title:

<h1>{{ title }}</h1>

Now we have a simple Angular component that displays a title. Let's make it more reusable by adding input and output properties.

Adding Input Properties

Input properties allow us to pass data into a component from its parent component. To create an input property, we need to add the @Input() decorator to a class property.

Let's add an input property to our MyComponentComponent that allows us to pass in a custom title:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  @Input() title = 'My Component';
}

In this code, we have added the @Input() decorator to the title property. This means that we can now pass in a custom title when we use the MyComponentComponent in another component's template.

Let's update the template file (my-component.component.html) to use the input property:

<h1>{{ title }}</h1>

Now we can use the MyComponentComponent in another component's template and pass in a custom title like this:

<app-my-component title="Custom Title"></app-my-component>

Adding Output Properties

Output properties allow us to emit events from a component to its parent component. To create an output property, we need to use the EventEmitter class and the @Output() decorator.

Let's add an output property to our MyComponentComponent that emits an event when the user clicks on the title:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  @Input() title = 'My Component';
  @Output() titleClick

in this code, we have defined an output property called titleClick. We have also created an instance of the EventEmitter class and assigned it to the titleClick property. This will allow us to emit events when the user clicks on the title.

Next, let's update the template file (my-component.component.html) to emit the titleClick event when the user clicks on the title:

<h1 (click)="onClick()">{{ title }}</h1>

In this code, we have added a (click) event listener to the title element. When the user clicks on the title, the onClick() method will be called, which will emit the titleClick event.

Let's update the MyComponentComponent class to define the onClick() method:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  @Input() title = 'My Component';
  @Output() titleClick = new EventEmitter<void>();

  onClick() {
    this.titleClick.emit();
  }
}

In this code, we have defined the onClick() method, which emits the titleClick event when called.

Now we can use the MyComponentComponent in another component's template and listen for the titleClick event like this:

<app-my-component (titleClick)="onTitleClick()"></app-my-component>

In this code, we have added a (titleClick) event listener to the MyComponentComponent element. When the titleClick event is emitted, the onTitleClick() method will be called.

Conclusion

In this tutorial, we have learned how to create reusable Angular components with input and output properties. Input properties allow us to pass data into a component from its parent component, while output properties allow us to emit events from a component to its parent component. By creating reusable components with input and output properties, we can easily customize and use them across multiple applications.