Post
Ask Question

Angular Components And Modules

We have seen how we can setup the application and how the application gets bootstrapped when a user makes the first request. These articles can be found below.

Now, it is time to understand the basic building blocks of the Angular Modules and Components.

What are Modules?

In programming terms, Modules can be described as self-contained chunks of the functionality in your application which can run independently. In Angular, Modules are the collection of the Components, Service directives, and Pipes which are related such that they can be combined to form a module. In a more simple way, we can imagine the Modules as the packages we use in the C# which are self-contained set of the classes and methods.

For example, consider the Customer Modules which will have the section to Add, Edit, Delete customers section to get the customer cards and masking them or operating them so we can logically include them to be in the Customer Module

 
 

The above diagram illustrates what module means in Angular. We are clubbing all User Interfaces, Services, and Pipes to modify the data in the Customer Module.

Module

  1. import {  
  2.     BrowserModule  
  3. } from '@angular/platform-browser';  
  4. import {  
  5.     NgModule  
  6. } from '@angular/core';  
  7. import {  
  8.     AppComponent  
  9. } from './app.component';  
  10. @NgModule({  
  11.     declarations: [  
  12.         AppComponent  
  13.     ],  
  14.     imports: [  
  15.         BrowserModule  
  16.     ],  
  17.     providers: [],  
  18.     bootstrap: [AppComponent]  
  19. })  
  20. export class AppModule {}  

This is the Root module which is added by default by the CLI when we set up the project which bootstraps AppComponent that has the selectors and template with it.

@NgModule

This is the decorator which is used to turn the TypeScript class AppModule into the Module. @NgModule takes the metadata object which tells the Angular application how to launch and compile the application.

Let’s see what it contains and properties of the @NgModule as its properties.

  • Declaration Array (declarations)
    This array contains which components belong to the AppModule by listing them in the Modules declarations array. Whenever we add the new component, we add that component in this declaration array.

Note
Only declarables, components, Pipes, and directives can be added in the declaration array. We don’t put any other NgModule class, Service class, or any other model class in the declaration array.

  • Imports Array (imports)
    Imports statement appears only in the @NgModule section which adds other Angular Modules. All of them decorated with the @NgModule are added inside the imports array.

In short, we add the Modules whose features are needed in the Application in the Imports array. Look at the code snippet.

  1. imports: [  
  2. BrowserModule  
  3. ],  

This snippet imports the BrowserModule as our application is executing in the browser. Every application that needs the browser, needs the BrowserModule to be imported in the application.

  • Providers Array (providers)
    We will see later that Angular apps mainly depend on the DI services to work properly so providers array helps in adding these services to the application before using them. So, for example, if we have data service which is required for the customer module can be injected into the app Module and it can be used across the components.

Components

The most important feature of any Angular application is the component which controls the View or the template that we use. Generally, we write all the application logic for the View that is mapped to this component.

In analogy, we can consider template to be the .aspx files and components can be the .aspx.cs file which can have all the application logic.

Let’s have a look at the code snippet of the AppComponent in the application.

  1. import {  
  2.     Component  
  3. } from '@angular/core';  
  4. @Component({  
  5.     selector: 'app-root',  
  6.     templateUrl: './app.component.html',  
  7.     styleUrls: ['./app.component.css']  
  8. })  
  9. export class AppComponent {  
  10.     title = 'app';  
  11. }  

When we look at the AppComponent class, it is just a plain class which has property title in it.

It turns into the Component when we add the metadata @Component or we can say when decorating the simple class with the @Component attribute, it turns into the component.

@Component

Decorator takes the required configuration object which needs information to create and view the component in the real time.

Following are the properties which are combined with the @Component class. Let's see what they tell one by one.

  1. selector
    It is a selector which tells Angular to create and insert the instance of the component whenever they see this selector in this case it has <app-root></app-root> What it does is it replace the content of the component in the tag <app-root> </app-root> which is present in the parent HTML in our case it is index.html

  2. templateurl
    This is the URL of the HTML which we are going to display when this component is called.

  3. styleurls
    These contain the styles which are applied to the component UI.

  4. providers
    Providers array is the array of dependency whenever we need to add dependency of any service or pipes in the providers array. Metadata that we define in the @Component tells angular where to get the major building blocks you specify in the application Component Metadata and template together forms the View In the Angular Application, So this was about the basics of the components an Modules. Basic configuration settings can be worked out on this.

Metadata that we define in the @Component tells angular where to get the major building blocks you specify in the application

Component Metadata and template together form the View In the Angular Application

 

References

  • https://angular-2-training-book.rangle.io/handout/directives/
  • https://angular.io/guide/architecture#templates


Similar Articles