How does an Angular application work?

Every Angular app consists of a file named angular.json. This file will contain all the configurations of the app. While building the app, the builder looks at this file to find front end developer interview questions the entry point of the application. Inside the build section, the main property of the options object defines the entry point of the application which in this case is main.ts.

The main.ts file creates a browser environment for the application to run, and, along with this, it also calls a function called bootstrapModule, which bootstraps the application.

Each component is declared with three properties:

• Selector — used for accessing the component

• Template/TemplateURL — contains HTML of the component

• StylesURL — contains component-specific stylesheets

What are Single Page Applications (SPA)?

Single page applications are web based applications that only need to be loaded once, with new functionality consisting of only minor changes to the user interface. It does not load new HTML pages to display the content of the new page, but rather generates it dynamically. This is made feasible by JavaScript’s ability to alter DOM components on the current page. A Single Page Application method is speedier, resulting in a more consistent user experience.

What are templates in Angular?

A template is a kind of HTML that instructs Angular about how to display a component. An Angular HTML template, like conventional HTML, produces a view, or user interface, in the browser, but with far more capabilities. Angular API evaluates an HTML template of a component, creates HTML, and renders it.

There are two ways to create a template in an Angular component:

• Inline Template

• Linked Template

Inline Template: The component decorator’s template config is used to specify an inline HTML template for a component. The Template will be wrapped inside the single or double quotes.

Example:

@Component({

selector: “app-greet”,

template: `<div>

<h1> Hello {{name}} how are you ? </h1>

<h2> Welcome to interviewbit ! </h2>

</div>`

})

Linked Template: A component may include an HTML template in a separate HTML file. As illustrated below, the templateUrl option is used to indicate the path of the HTML template file.

Example:

@Component({

selector: “app-greet”,

templateUrl: “./component.html”

})

What are directives in Angular?

A directive is a class in Angular that is declared with a @Directive decorator.

Every directive has its own behaviour and can be imported into various components of an application.

When to use a directive?

Consider an application, where multiple components need to have similar functionalities. The norm thing to do is by adding this functionality individually to every component but, this task is tedious to perform. In such a situation, one can create a directive having the required functionality and then, import the directive to components which require this functionality.

Types of directives:

1. Component directives

These form the main class in directives. Instead of @Directive decorator we use @Component decorator to declare these directives. These directives have a view, a stylesheet and a selector property.

2. Structural directives

• These directives are generally used to manipulate DOM elements.

• Every structural directive has a ‘ * ’ sign before them.

• We can apply these directives to any DOM element.

Let’s see some built-in structural directives in action:

<div *ngIf=”isReady” class=”display_name”>

{{name}}

</div>

<div class=”details” *ngFor=”let x of details” >

<p>{{x.name}}</p>

<p> {{x.address}}</p>

<p>{{x.age}}</p>

</div>

In the above example, we can *ngIf and *ngFor directives being used.

*ngIf is used to check a boolean value and if it’s truthy,the div element will be displayed.

*ngFor is used to iterate over a list and display each item of the list.

3. Attribute Directives

These directives are used to change the look and behaviour of a DOM element. Let’s understand attribute directives by creating one:

How to create a custom directive?

We’re going to create an attribute directive:

In the command terminal, navigate to the directory of the angular app and type the following command to generate a directive: ng g directive blueBackground

The following directive will be generated. Manipulate the directive to look like this:

import { Directive, ElementRef } from ‘@angular/core’;

@Directive({

selector: ‘[appBlueBackground]’

})

export class BlueBackgroundDirective {

constructor(el:ElementRef) {

el.nativeElement.style.backgroundColor = “blue”;

}

}

Now we can apply the above directive to any DOM element: <p appBlueBackground>Hello World!</p>

Explain Components, Modules and Services in Angular

For better understanding, I would like you to create an Angular application by running the following inside the command terminal: ng new angularApp

The above command will create an angular application in the directory.

Next, let’s move on to understand Components, Modules, and Services.

• Components

In Angular, components are the basic building blocks, which control a part of the UI for any application.

A component is defined using the @Component decorator. Every component consists of three parts, the template which loads the view for the component, a stylesheet which defines the look and feel for the component, and a class that contains the business logic for the component.

For creating a component, inside the command terminal, navigate to the directory of the application created, and run the following command: ng generate component testOr ng g c test

One can see the generated component inside src/app/test folder. The component will be defined inside test.component.ts and this is how it looks:

import { Component, OnInit } from ‘@angular/core’;

@Component({

selector: ‘app-test’,

templateUrl: ‘./test.component.html’,

styleUrls: [‘./test.component.css’]

})

export lass TestComponent implements OnInit {

constructor() {}

ngOnInit() {

}

}

As we can see in the above image, our component is defined with @Component decorator.

• Modules

A module is a place where we can group components, directives, services, and pipes. Module decides whether the components, directives, etc can be used by other modules, by exporting or hiding these elements. Every module is defined with a @NgModule decorator.

By default, modules are of two types:

• Root Module

• Feature Module

Every application can have only one root module whereas, it can have one or more feature modules.

A root module imports BrowserModule, whereas a feature module imports CommonModule.

In the application that we created before, one can see that the root module is defined inside app.module.ts and this is how it looks:

import { BrowserModule } from ‘@angular/platform-browser’;

import { NgModule } from ‘@angular/core’;

import { AppComponent } from ‘./app.component’;

import { TestComponent } from ‘./test/text.component’;

@NgModule({

declarations: [

AppComponent,

TestComponent

],

imports: [

BrowserModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

We can see in the above image that the component we created earlier is already imported in the declarations array.

To create a feature module, run the following command: ng g m test-module

The module is created inside the src/app/test-module/test-module.module.ts file:

import { NgModule } from ‘@angular/core’;

import { CommonModule } from ‘@angular/common’;

@NgModule({

declarations: [],

imports: [

CommonModule

]

})

export class TestModuleModule { }

As one can see, CommonModule is imported since this is a feature module.

• Services

Services are objects which get instantiated only once during the lifetime of an application. The main objective of a service is to share data, functions with different components of an Angular application.

A service is defined using a @Injectable decorator. A function defined inside a service can be invoked from any component or directive.

To create a service, run the following command: ng g s test-service

The service will be created inside src/app/test-service.service.ts:

import { Injectable } from ‘@angular/core’;

@Injectable({

providedIn: ‘root’

})

export class TestServiceService {

constructor() { }

}

Any method/function defined inside the TestServiceService class can be directly used inside any component by just importing the service.