How to use @Input and @Output in Angular 17

Angular 17 introduces a new way of using @Input and @Output within components. @Input allows you to pass data into a component from its parent, while @Output allows a child component to emit events to its parent. Here’s a guide on how to use these decorators in Angular 17:

Using @Input

To use @Input in a component, simply define a property with the @Input decorator in the child component. For example:

“`typescript
import { Component, Input } from ‘@angular/core’;
@Component({
selector: ‘app-child’,
template: ‘Child Component’
})
export class ChildComponent {
@Input() data: string;
}
“`

Then, in the parent component, you can pass data to the child component using property binding:

“`html

“`

Using @Output

To use @Output in a component, define a property with the @Output decorator and use EventEmitter to emit an event from the child component. For example:

“`typescript
import { Component, Output, EventEmitter } from ‘@angular/core’;
@Component({
selector: ‘app-child’,
template: ‘Child Component’
})
export class ChildComponent {
@Output() emitEvent: EventEmitter = new EventEmitter();

onClick() {
this.emitEvent.emit(‘Event emitted from child component’);
}
}
“`

In the parent component, you can listen to the emitted event and handle it using event binding:

“`html

“`

With these techniques, you can easily pass data into a component using @Input and listen for events emitted from a component using @Output in Angular 17.