Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular.

We build angular applications with basic concepts which are NgModules. It provides a compilation context for components. At the beginning of an angular project, the command-line interface provides a built-in component which is the root component. But, NgModule can add a number of additional components. These can be created through a template or loaded from a router. This is what a compilation context about.

What is a Component in Angular?

Components are key features in Angular. It controls a patch of the screen called a view. A couple of components that we create on our own helps to build a whole application. In the end, the root component or the app component holds our entire application. The component has its business logic that it does to support the view inside the class. The class interacts with the view through an API of properties and methods. All the components added by us in the application are not linked to the index.html. But, they link to the app.component.html through the selectors. A component can be a component and not only a typescript class by adding a decorator @Component. Then, for further access, a class can import it. The decorator contains some metadata like selector, template, and style. Here’s an example of how a component decorator looks like:

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

Role of App Module

Modules are the package of functionalities of our app. It gives Angular the information about which features does my app has and what feature it uses. It is an empty Typescript class, but we transform it by adding a decorator @NgModule. So, we have four properties that we set up on the object pass to @NgModule. The four properties are declarations, imports, providers, and bootstrap. All the built-in new components add up to the declarations array in @NgModule.

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule,
  AppRoutingModule,
  FormsModule
],
bootstrap: [AppComponent]
})

What is Data Binding?

Data Binding is the communication between the Typescript code of the component and the template. So, we have different kinds of data binding given below:

• When there is a requirement to output data from our Typescript code in the HTML template. String interpolation handles this purpose like {{data}} in HTML file. Property Binding is also used for this purpose like [property] = “data”.

• When we want to trigger any event like clicking a button. Event Binding works while we react to user events like (event) = “expression”.

• When we can react to user events and output something at the same time. Two-way Binding is used like [(ngModel)] = “data”.

What is a Service in Angular?

Services are substitutable objects wired together. Also, it organizes and shares code across your app. For logic that is not associated with a specific view, and that we want to share across components, we create a service class. The @Injectable() decorator immediately precedes the service class definition. This decorator provides the metadata. And, it allows other providers to inject as dependencies into our class.

First, we create a service and provide it to the root.

example.service.ts

import { Injectable } from '@angular/core';
import { Example } from './example'; 
import { data } from './mock-data'; 

@Injectable({ 
  providedIn: 'root', 
}) 
export class ExampleService { 

  constructor() { }

  getData(): Example[] { 
    return data; 
  } 

}

Components should not fetch data directly. Else, they should present data accessing to a service. Here’s how we can add the service in our component:

home.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Example } from '../example'; 
import { ExampleService } from '../example.service'; 

@Component({ 
  selector: 'app-home', 
  templateUrl: './home.component.html', 
  styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit {   
 
  data: Example[]; 

  constructor(private exampleService: ExampleService) { } 

  ngOnInit() { 
    this.getData(); 
  } 

  getData(): void { 
    this.exampleService.getData() 
        .subscribe(data => this.data = data); 
  } 
}

So, from the above example, we can see that it is easy to add service in a component. First, we inject the service in the constructor. After that, we add a method to fetch data in ngOnInit(). Finally, we subscribe to the service to use methods for fetching data.

Routing

Routing means navigating between pages. The angular router installed from the @angular/router package. It provides a complete routing library. They have multiple router outlets, different path matching strategies, and easy access to route parameters. It enables developers to build Single Page Applications with multiple views. And, it allows navigation between these views. The router-outlet is a directive used from the router library where the router is inserted in the component and gets matched based on the current browser’s URL.

<ion-router-outlet></ion-router-outlet>

So, this was a short overview of the basics of angular. We can dive further into each part of the angular.

Further in the series of Angular Basics, visit the second blog for Components and data binding.

Also, you can visit Angular Docs to study more in details.

Thanks!