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';
@Component({
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
