Building blocks of Angular

Let’s get started. The various building blocks in Angular are as follows:

1. Components

2. Modules

3. Directives

4. Decorators

5. Pipes

6. Data Binding

7. Templates

8. Metadata

9. Services

10. Dependency Injection

Components

A component refers to a Javascript class, which in turn rendered as section in a View. In simpler terms, a component encapsulates the Data, HTML Template and Logic in a view.Generally every angular app, will have atleast one component. That is app.component.ts. A component is a Javascript class which is decorated with @Component decorator. The component decorator takes parameters like selector for defining the component custom tag, by which we can render that component where ever we want in our application and also other parameters like template, templateUrl, styles and stylesUrl.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

}

Modules

Angular applications maintain modularity. In simpler terms, Module in an Angular refers to a file which group similar components, directives, pipes, services which does or perform a certain task. Every angular application will have atleast one root module and its is generally app.module.ts. Like component, module is also an javascript class that is decorated by @NgModule decorator. NgModule decorator takes parameters like declarations, imports, providers etc.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Directives

Directives in angular, helps us to add dynamic content the DOM elements. Angular has two types of directives.

1. Structural Directives

Structural directives are the one, that modifies the structure of the DOM elements like presence/removing an element from the DOM. These directives are added along with * (asterisk).

*ngIf, *ngFor, ngSwitch & *ngSwitchCase are examples of structural directives.

<p *ngIf = "toDisplay"> This is a paragraph. </p>

<p> List of users </p>

<ul>
  <li *ngFor = "let user of userAvailable">
    {{ user.userName }}
  </li>
</ul>

2. Attribute Directives

Attribute directives are the one’s that alters the appearance or behavior of an existing element in a DOM.

ngClass, ngStyle, ngModel, formGroup, and formControlName are some of the examples of attribute directives

<p>Passing an Array of classes:</p>
<button [ngClass]="['btn', 'btn-primary']">Button</button>

Decorators

Decorators in angular are annotated with @, which helps to define metadata for any javascript classes like components, directives, services and modules etc.

Some of the decorators available are:

@NgModule

@Directive

@Component

@Injectable

@Pipe

@Input

@Output

@HostBinding

@ViewChild

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

In angular, we can have flexibility of developing custom directives.

Pipes

Angular provides us a lot of built in pipes, which helps us to transform data in the template. Usually pipes are functions that accepts input and transforms those text into specified format and returns as output.

Some of the pipes available are:

Currency Pipe

Date Pipe

Uppercase Pipe

Lowercase Pipe

Decimal Pipe

JSON Pipe

// Currency Pipe {{ priceToPay | currency:'INR' }}

In angular, we can have flexibility of developing custom pipes.

Data Binding

1. Interpolation

2. Property Binding

3. Event Binding

4. Two way Binding

Interpolation binds any javascript variable data to the template

<p> {{ name }} </p>

Property binding allows binding of any javascript variable value to any property or attribute of an html element.

 <app-message [message] = "messageToDisplay"></app-message>

Event binding binds any native element to javascript function and triggers the function when the event occurs.

<p (click) = "onClick()">This is paragraph </p>

Binding javascript variable to the input field, and also to capture the input field data is called Two way binding

<input [(ngModel)]="user.name">

Templates

The view of the component is defined through templates. Templates are basically the HTML we use to show on our page.

Metadata

Metadata in angular tells a javascript class, how it should be processed on screen. Usually we will pass meta data in the decorator’s.

@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})

Services

A service is a class containing any function, feature with a defined, and specific purposes like performing side effects like HTTP requests. This makes our angular app more modular, means instead of writing same code in different components we will inject the service and calls the method in the service that triggers HTTP requests.

Dependency Injection

Dependency Injection allows us to inject any dependency or service and can provide its instance through out entire web application or any particular module or component.

constructor(private authService : AuthService) { }

Now you have gained good foundation on basics required to kick start developing applications in Angular.

𝚃𝚑𝚊𝚗𝚔𝚜 𝚏𝚘𝚛 𝚛𝚎𝚊𝚍𝚒𝚗𝚐..!!

𝙷𝚘𝚙𝚎 𝚢𝚘𝚞 𝚕𝚒𝚔𝚎𝚍 𝚖𝚢 𝚊𝚛𝚝𝚒𝚌𝚕𝚎. 𝙳𝚘 𝚜𝚑𝚊𝚛𝚎 𝚝𝚑𝚎 𝚊𝚛𝚝𝚒𝚌𝚕𝚎 𝚒𝚏 𝚢𝚘𝚞 𝚏𝚒𝚗𝚍 𝚒𝚝 𝚠𝚒𝚕𝚕 𝚋𝚎 𝚞𝚜𝚎𝚏𝚞𝚕 𝚝𝚘 𝚢𝚘𝚞𝚛 𝚙𝚎𝚎𝚛𝚜.