Component - grungy wooden headline on Maple  - 3D rendered royalty free stock image. This image can be used for an online website banner ad or a print postcard.

Angular Component Communication

In Angular, we utilize the component structure to organize our code and functionality. This also helps us to adhere to OOP principles. We need a way to share information between components. So how do components interact in Angular?

No Relation

If two components are not related, they share data through an Angular service.

Familial Relation

When you use a component inside another, this creates a hierarchical, parent/child relationship. Here is an example…

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

    selector: 'app-root',
    template: `
        <h1>Greetings, {{yourName}}!</h1>
        <app-child></app-child> // child
// parent
export class AppComponent {
    yourName = 'John';

Parents and children can communicate in various ways (just like in real life…lol)…

  • @Input()
  • @Output()
  • Temp Ref Variable
  • ViewChild
  • ContentChild

I will delve into each of these in upcoming posts.

Happy Coding!

Clay Hess

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
Skip to content