Building blocks of Angular
This story deals or goes through various building blocks that will be helpful while building an Angular application. This story is the continuation of Angular series. If your completely new to Angular and thinking of getting start with it, check out my previous story in this series where i have discussed about setting up Angular environment in your local system and even by the end of that story, you will be running your First Angular app locally.
Let’s get started. The various building blocks in Angular are as follows:
- Components
- Modules
- Directives
- Decorators
- Pipes
- Data Binding
- Templates
- Metadata
- Services
- 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.
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.
Directives
Directives in angular, helps us to add dynamic content the DOM elements. Angular has two types of directives.
- 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.
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
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
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
- Interpolation
- Property Binding
- Event Binding
- 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) { }Tada..!! Now you have gained good foundation on basics required to kick start developing applications in Angular.
𝚃𝚑𝚊𝚗𝚔𝚜 𝚏𝚘𝚛 𝚛𝚎𝚊𝚍𝚒𝚗𝚐..!!
𝙷𝚘𝚙𝚎 𝚢𝚘𝚞 𝚕𝚒𝚔𝚎𝚍 𝚖𝚢 𝚊𝚛𝚝𝚒𝚌𝚕𝚎. 𝙳𝚘 𝚜𝚑𝚊𝚛𝚎 𝚝𝚑𝚎 𝚊𝚛𝚝𝚒𝚌𝚕𝚎 𝚒𝚏 𝚢𝚘𝚞 𝚏𝚒𝚗𝚍 𝚒𝚝 𝚠𝚒𝚕𝚕 𝚋𝚎 𝚞𝚜𝚎𝚏𝚞𝚕 𝚝𝚘 𝚢𝚘𝚞𝚛 𝚙𝚎𝚎𝚛𝚜.
𝙻𝚎𝚝 𝚖𝚎 𝚔𝚗𝚘𝚠 𝚒𝚏 𝚢𝚘𝚞 𝚑𝚊𝚟𝚎 𝚊𝚗𝚢𝚝𝚑𝚒𝚗𝚐 𝚝𝚘 𝚊𝚜𝚔 𝚒𝚗 𝚌𝚘𝚖𝚖𝚎𝚗𝚝𝚜 𝚜𝚎c𝚝𝚒𝚘𝚗 :)
