Component interaction is the most tricky part of Angular. Clearly explained all methods in this slide. Commonly we used 4 methods to pass the data from one component to another component in Angular. If you want more Angular tutorials visit our website https://codingindian.com/ For video tutorials subscribe to our YouTube channel https://www.youtube.com/c/CodingPullingoo/

1. Component Interaction
In Angular
SATHISH KUMAR | www.codingindian.com

2. How to do? URL Parameters Input & Output
Decorators
Services & Observables Local storage

3. Passing Data
from URL

4. There are two ways to pass
the data through URL in Angular
• Router Parameters
• Query Params
If the parameter is mandatory for the component then we have to use router
parameter. Otherwise, we can use query params.

5. Router
Parameters

6. Router Code
Router parameters are required parameters.
We have to register the parameter with the
URL in the router module like this
Passing the router params

7. Reading Router Params
Here’s how to read a router parameter from
the component routed to
Component 1
Send Data Using
Router
Component 2
Receive Data Using
Activated Router

8. Query
Parameters

9. Router Code
Query params are optional params. There is
no need to register a separate URL for the
query params.
Passing the router params
value

10. Reading Router Params
Here’s how to read a router parameter from
the component routed to
Component 1
Send Data Using
Router
Component 2
Receive Data Using
Activated Router

11. Passing Data
Through
@Input and
@Output
Decorator

12. If we want to pass data from
a child to a parent
or a parent to a child
component
we can use @Input and @Output.

14. Parent Component Child Component

15. Passing Data
Through a Service
Using
Observables

16. If two components are siblings
or the level of a component
in the hierarchy is more distant,
then it’s good to use a service
for passing the data using observables.

17. Service Code
Emit and Subscribe Data

18. Passing Data
Through
Local Storage

19. Local storage is an HTML5 mechanism to store the
data in the web browser, and it allows the user to
manage and store the data in the browser. It works
even when there is no internet connection
available. You can still see your data
even if you refresh the web page.

20. Set Data in Local Storage Get Data From Local Storage

21. admin@codingindian.com
www.codingindian.com
https://www.youtube.com/c/CodingPullingoo
C O N TA C T
D E TA I L
https://chat.whatsapp.com/GuHtRF9arsS6qprBGkY
bee