Building Blocks Of Angular

Introductions

In this article, we are going to see about the building blocks of Angular

• Modules
• Components
• Templates
• Metadata
• Data binding
• Directives
• Services
• Dependency injection

Modules 

In angular app has at least one module which we call app module. A module is a container for a group of related components. There are two types of modules one is encapsulating block of function within the single component and the other is encapsulating block of function within a single or group of components by providing exposure in an interface. we need to divide our app module into sub smaller modules and each module is responsible for a specific section. 

Components 

Its component represents a unique "View" and "View Model" in Model-View-ViewModel (MVVM) pattern or exactly like what components do in Angular. The "View" or Template shows how the complete component will look–when displayed on the browser. "View Model" has all required logic parts to provide "View" with rich functionality and data.

In this case, we followed some steps like below

• Create the Component. 
• Register the component in module. 
• Add the element in HTML Markup. 

Create the Component. 

To create the component, we can use the below ng command followed by some name.  

ng generates component component_name 

OR 

ng g c component_name 

Here I have entered the command like ng g c sample. After successfully create component, it will create additionally  

• sample.component.ts (Class with @Component decorator) 
• sample.component.html (For the template design) 
• sample.component.css (For stylesheets) 

Register the component in module 

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SampleComponent } from './sample.component';  
@NgModule({
  declarations: [AppComponent,SampleComponent],  
  imports: [ BrowserModule],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { } 

I have registered the component on the appmodule.ts page. We are going to declarations in the samplecomponent. 

Add the element in HTML Markup. 

Added some markup design in the sample.component.html page like the below code. 

<h3>Test Component</h3> 

Templates

The templates' view represents a view that improves HTML with Angular functionality like data binding.

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'app-root', 
    template: '<h2>Test Angular</h2>' 
}) 
export class AppComponent {} 

If we want is to encapsulate the data in the container and show it in the template markup dynamically.

In the template to encapsulate the data and when the data changes here at runtime, Angular automatically updates it in the browser view as well.

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'app-root', 
    template: '<h2> {{ name + "Angular" }}</h2>' 
}) 
export class AppComponent {name = "Test Sat";} 

Metadata 

Metadata helps in connecting everything in the applications, a "View" with a "View Model" with styles. 

• the selector is Metadata in Angular the custom HTML to be included with the component.
• template URL is the exclusive URL for the template to be used when processing the component,
• an array of directives with this kind of Metadata will tell Angular which other Component or the directives should be included in that component.
• an array of style URLs with this type of Metadata you can easily define customized styles for the component.
• Angular how to inject dependencies like services in a component or @RouterConfig that helps you to configure routing in your project application.

Data binding 

Data binding is a technique, where the data stays in sync between the component and the view. 

There are two different types of data bindings 

• one-way  
• two-way binding. 

One-way data binding

One-way data binding is a one-way interaction between a component and its HTML template. If you perform any changes in your component, then it will reflect the HTML elements also.

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'app-root', 
    template: '<h2> {{  name }}</h2>' 
}) 
export class AppComponent {name = "Test Sat";} 

Two-way data binding

Two-way data binding is a both-way interaction with components and HTML, data flows in both ways from component to HTML views and HTML views to the component. A simple example is ngModel. If you do any changes in your object model then, it reflects in your HTML view.

Here testdata is one of the objects and another one temptestdata. Initially assign some values in the testdata object and change the value after the user manually enter using passdata click event.

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
     styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
  testdata:string = "Virat Sat";  
  temptestdata:String=""; 
passData(){ 
    this.temptestdata=testdata; 
  } 
} 

HTML

<input type="text" (ngModel)="testdata"> 
<button (ngClick)="passData()"> Pass Data Click here </button> 
<h3>{{temptestdata}}</h3> 

Directives 

There are three types of Directives present in Angular 

Components Directive The component can be used as a directive. Every component has an and Output option to pass between the component and its parent HTML elements. 

<selector-name [input-reference]="input-value"> </selector-name> 
For Example, 
<list-data [items]="datavalues"></list-data> 

Structural Directive is like *ngFor and *ngIf which enables you to make changes to DOM with the help of adding or by the Input moving nodes.

<div *ngIf="true">Test Sat data</div> 
<li *ngFor="let data of list-data"> 
  {{ data }} 
</li> 

Attribute Directive helps in adding behavior or do a change in the look or appearance of a specific element just like ngmodel directive which implements two-way data binding is an Attribute Directive.

<HTMLTag [attrDirective]='value' /></HTMLTag> 
For Example, 
<p [showToolTip]='Test Virat' /> 

Services 

Services simply help in making reuse of service. As the project becomes bigger naturally more components will add to it and which also will require data to access. So, every time making a copy-paste of code it will create a single reusable singleton data service. 

Dependency injection 

Dependency Injection to inject the necessary dependencies for a given component/service at runtime and provide flexibility, extensibility, and testability to the framework and your application. 

import { Component } from '@angular/core'; 
import { Service } from './service'; 
@Component({ 
    selector: 'app-root', 
    template: ` 
    <ul> 
        <li *ngFor="let data of datalist"> 
            {{ data }} 
        </li> 
    </ul>
}) 
export class AppComponent { 
    datalist; 
    constructor(){ 
        let service = new Service(); 
        this.datalist = service.getCourses(); 
    } 
} 

We need to explicitly instruct the Angular to create an instance of Service and passes to our AppComponent. This concept is called Dependency Injection. So, we should instruct Angular to inject the dependency of this component into its constructor.

I hope this article was most helpful for you.