How to pass value from template to component and vice versa in Angular?

In Angular, you can pass values between the template and component in a number of ways. Here are a few common ways to do this:

Property Binding: You can pass data from the component to the template using property binding. This involves binding a component property to a template element property or attribute. For example, to pass the value of a variable named “name” from the component to the template, you could use the following syntax:

<p>Hello, {{ name }}!</p>

Event Binding: You can pass data from the template to the component using event binding. This involves binding a template event to a component method. For example, to call a method named “handleClick” in the component when a button is clicked, you could use the following syntax:

<button (click)="handleClick()">Click me</button>

Two-Way Binding: You can pass data back and forth between the component and template using two-way binding. This involves combining property and event binding using the [(ngModel)] directive. For example, to bind an input field to a variable named “username” in the component, you could use the following syntax:

<input [(ngModel)]="username">

This will bind the value of the input field to the “username” variable in the component, and any changes made to the input field will also update the value of the variable.

Input and Output Decorators: Another way to pass data between a component and its template is by using the Input and Output decorators. The Input decorator allows you to pass data from a parent component to a child component, while the Output decorator allows you to emit data from a child component to a parent component.
For example, in the parent component, you could pass a string value to the child component using Input decorator like this:

<child-component [name]="parentName"></child-component>

And in the child component, you can receive that data using Input decorator like this:

import { Component, Input } from '@angular/core';
@Component({
  selector: 'child-component',
  template: '<p>Hello {{ name }} from child component</p>',
})
export class ChildComponent {
  @Input() name: string;
}

Similarly, to emit data from a child component to a parent component, you can use the Output decorator in the child component and EventEmitter like this:

import { Component, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'child-component',
  template: '<button (click)="onClick()">Click me</button>',
})
export class ChildComponent {
  @Output() buttonClicked = new EventEmitter();
  onClick() {
    this.buttonClicked.emit('Button clicked from child component');
  }
}

And then in the parent component, you can listen to the emitted event and receive the data like this:

<child-component (buttonClicked)="onButtonClicked($event)"></child-component>

import { Component } from '@angular/core';
@Component({
  selector: 'parent-component',
  template: '<child-component (buttonClicked)="onButtonClicked($event)"></child-component>',
})
export class ParentComponent {
  onButtonClicked(data: string) {
    console.log(data); // Output: 'Button clicked from child component'
  }
}

These are some common ways to pass data between the template and component in Angular.