Steps to create an Angular application

Step 1: Create an angular application using the following command.

ng new angular-com

Make sure angular is already installed in your system.

Step 2: Go inside the angular project

cd angular-com

Step 3: Next, we will run the application through the below command

ng serve --open

Step 4: Create the required component to share data between them.

ng generate component comp-alpha
ng generate component comp-beta

Component Communication in Angular

Angular, as a robust front-end framework, allows you to build complex and interactive web applications by creating reusable components. One of the key aspects of building such applications is effective communication between these components.

There are a lot of instances where we need to transfer data and events between angular components.

The communication can be between parent and child components or between sibling components. We will try out 3 methods to transfer data on our angular application.

Table of Content

  • 1. Passing data from parent to child through input binding
  • 2. Listening to events from the child component in the parent component
  • 3. Using Services to pass data between sibling component

Similar Reads

Steps to create an Angular application:

Step 1: Create an angular application using the following command....

Folder Structure:

The updated Dependencies in package.json file will look like:...

1. Passing data from parent to child through input binding

In angular, we use input bindings to pass data from parent to child components. In our example code above, we will pass data from the app component to the alpha component by using an input decorator. Consider the following code changes –...

2. Listening to events from the child component in the parent component

In the previous method, we passed values from parent to child. To listen to any event happening in the child component like – button-click, saving completion, page load, etc., we will use an event listener to accomplish this....

3. Using Services to pass data between sibling component

Services can be used to pass data and components between parent and child components or between sibling components. We will take up an example to showcase how to pass values using services between child components....

Contact Us