Angular - Understanding Architecture - Part 2

Note: This article is the continuation of the Angular series, if you have not read the part 1, head over to here.

In this we will be covering architecture of Angular framework.

Story of Angular revolves around 3 major building blocks i.e. NgModules, Components and Services. NgModules provides a context to the Angular Components which in turn uses Services for providing shared data or specific functionalities to the components.


Modules

As I am a .Net Developer, I can relate Angular modules to Namespaces in C#. As namespaces allows us to control the scope of methods and classes in .Net Applications, similarly Modules allows us to maintain the components and services in Angular. We can register any number of components, services in a NgModule.

An Angular application must have one root module which bootstraps it by specifying the root component to be rendered on the browser. Similar to namespaces, Angular Modules can also import other modules to use their functionalities.

In Angular, we can use the following command to generate new Module:

ng generate module module-name

@NgModule() decorator is used for declaring a class as Angular Module. It specifies different properties of the module like declarations, service providers, imports, exports etc.



Components

Component is one of the main building blocks of Angular framework. Every Angular application must have at least one component and this component is called ‘root’ component. This is the component which bootstraps Angular application and connects the hierarchy of components with Document Object Model (DOM).

As Angular is written in Typescript, each of its component is associated with a class which contains all the data and logic behind this component. Along with that, a component also has a HTML file which describes the UI of that component that will be rendered in the browser.

In Angular, we can use the following command to generate new component

ng generate component component-name

This will generate 4 files as shown above.

  1. .html file: Contains UI template of the component.

  2. .spec.ts: Used for testing the component.

  3. .ts: Contains all the data and logic of the component.

  4. .css: Contains styling of the component

@Component() decorator is used for declaring a class as a component and it specifies the template and other related metadata of that component.



Services and Dependency Injection

Now we have learned what components are, and where all the data and logic of the component resides. Ya Right, It’s ‘.ts’ file of the component. 😊

But what if the same data and logic is also a part of some other component? Do we really duplicate the same in both the components? As we are good programmers, I think we don’t do that. So, what’s the solution for this?

We build ‘Services’. :D

Services provides us the shared access to data and logic across multiple components which is then injected in the components using Dependency Injection.

Its very easy to create a service in Angular using this command:

ng generate service service-name

Don’t worry about the ‘spec.ts’ at this time. This file is mainly used for testing purpose.

Notice, @Injectable() decorator above the service class. It specifies that this service is Injectable in the components using Dependency Injection.


Component Communication

Let’s talk about another important concept in Angular i.e. Component Interaction. Components can share data either by using common service or by parent-child communication.

Before we start let’s see what I mean by parent and child components. Parent component is the one which acts like a container to child components. Parent can have any number of child components.

Now let’s have a look at how parent and child components communicate. Following are the two ways of component communication:

1: Parent to Child Component

In real world applications, we must need to pass data from parent component to child component. Let’s see step by step how we can achieve this.

@Input(): This decorator is used to get the data from the parent component.

Let’s add two components with names parent and child component, in the sample application by using Angular CLI's ng generate component command.

ng generate component parent
ng generate component child

Once you create the components, look at the code snippet of the child component (child.component.ts)

Here, we have created an Input variable in child component. But wait, from where the value of this ‘messageFromParent’ variable be assigned?

Yes, you guessed it Right 😊. This variable will be assigned by its parent component as this is a Parent-Child interaction.

Now, we have to use this child component in parent component and to do so, we have selector of child component i.e. ‘app-child’. Let's look at the HTML template of parent component.

Notice, we just passed the value in ‘messageFromParent’ Input property of child component using a variable of parent component.

Now, when we run our application, we can see the following output:

Look it’s so easy to send data from parent to child. 😊

2: Child to Parent Component

We have seen how we can pass data from parent to child component, now let’s look at how to pass data from child to parent component.

Similar to @Input() we have @Output() decorator in Angular. For sending data from child to parent component, the child component emits the data to the parent component by using the @Output decorator and Event Emitter.

‘Event Emitter’ is majorly used in Angular to emit the events to the components. Components use these events to perform the necessary function.

So, let’s start again by adding two components using Angular-cli command:

ng generate component parent
ng generate component child

Now, navigate to child.component.ts file.

Here, I have added a button which on clicked will emit an event with a message ‘Hello Parent’ to its parent component using ‘messageForParent’ @Output() variable.

Let’s look at the parent.component.ts file

Notice, we bind the ‘messageForParent’ event with a function ‘handleChildMessage($event)’ to handle the event raised by child component. ‘$event’ represents the data which is emitted by the child component.

After, running the application and once we clicked the button, we get the following output:

So, now we have seen how components communicates with each other in Angular application.

Enough of theoretical knowledge for now. :P

Here is the next article - Understanding Directory Structure & Creating CRUD App


If anything is not clear or you want to point out something, please comment down below.

Please share with other if you can, this motivate us to write more.

You may also like other articles on overflowjs.com

Vue.js - Getting Started In 2019 (Part-1)

Map-Reduce-Filter-Find In Javascript ES6

Proxy In Javascript - 2019

Js ES6 Iterables and Iterators - 2019

Javascript - Generator-Yield/Next & Async-Await - 2019

This keyword In Javascript 2019 - Javascript Context

Javascript- Currying VS Partial Application 2019

Javascript Performance Test 2019 [Part-1] - for vs for each vs (map, reduce, filter, find)

Structure Node.js App - Fractal Pattern - 2019

Email

About Lalit Aggarwal

Passionate, responsible, team player and committed engineer, with a get-it-done, on-time spirit, and more than 5 years of experience in designing, implementing and adapting technically sophisticated online and offline windows applications using Microsoft Technologies, C#, WPF, SQL, N-tiered architecture and more. Proficient in C# infrastructure, language standards, object modeling technologies and Application Life Cycle management.

Subscribe to our email list

More Tags Of Your Interest