docs(angular): add communication content (#6952)

pull/6972/head
J. Degand 3 months ago committed by GitHub
parent ac8efdd1b5
commit 93e69bd6e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 17
      src/data/roadmaps/angular/content/communication@19c7D-fWIJ3vYFT6h8ZfN.md

@ -1 +1,18 @@
# Communication # Communication
Angular components can communicate with each other using `@Input()` and `@Output()` decorators. These decorators facilitate data exchange between parent and child components.
- **@Input()**: This decorator allows a parent component to pass data to a child component, enabling the child to receive and use the data.
- **@Output()**: This decorator allows a child component to emit events to a parent component, enabling the parent to respond to changes or actions within the child component.
Additionally, **model inputs** are a special type of input that enable two-way data binding. This means that changes in the child component can be propagated back to the parent component, ensuring synchronization between the two. Model inputs automatically create a corresponding output, typically named by appending “Change” to the input’s name, to facilitate this two-way communication.
To facilitate communication between unrelated components, it’s most effective to trigger events using `EventEmitter` and have the components listen for these events. This approach ensures a decoupled and flexible architecture, allowing components to interact seamlessly without direct dependencies.
Visit the following resources to learn more:
- [@official@Angular Official Website - Inputs](https://angular.dev/guide/components/inputs)
- [@official@Angular Official Website - Outputs](https://angular.dev/guide/components/outputs)
- [@official@Angular Official Docs - Model Inputs](https://angular.dev/guide/signals/model)
- [@official@Custom events with outputs](https://angular.dev/guide/components/outputs)
- [@video@Non-Related Component Communication | Angular Component & Directives](https://www.youtube.com/watch?v=aIkGXMJFTzM)
Loading…
Cancel
Save