Component Communication in Angular 17 - Frontend Development

Component Communication :

        Component communication refers to the ability of different components in an Angular application to share information and communicate with each other. Effective communication between components helps in maintaining modularity, separation of concerns, and clean architecture throughout the development process. Various techniques exist to establish communication channels between components in Angular, including Input and Output properties, services, and observables.

Various techniques :

• Input and Output Properties.
• Services.
• Observables.

Input Properties :

  Parent Component HTML file : 

  Syntax : 

        <child-selector-name [child @input property name] = "parent-variable-name">

                </child-selector-name>

<h1>Parent Component </h1>

<child-component [parentProperty] = "userName"></child-component>

  Parent TypeScript file : 

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

@Component({
  selector: "app-parent-component",
  templateUrl: "./parent-component.component.html",
  imports: [ChildComponent]
})
export class ParentComponent implements OnInit {
  userName : string = "ram";

}

  Child Component TypeScript file :

    Syntax : 

        @Input() parentPropertyName :  string = "";

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

@Component({
  selector: "app-child-component",
  templateUrl: "./child-component.component.html",
  styleUrls: ["./child-component.component.css"]
})
export class ChildComponent implements OnInit {
  @Input() parentProperty: string; // Declare the @Input() property
}

  Child Component HTML file :

<p> {{ parentProperty }} </p>

Output :

         Parent Component

         ram