Mohd Amir Ahmad: June 2021

Wednesday, 16 June 2021

Structural Directives in Angular

Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

There are three built-in structural directives, NgIf, NgFor and NgSwitch.

NgFor: It is a repeater directive that customizes data display. It can be used to display a list of items.

NgIf: It removes or recreates a part of DOM tree depending on an expression evaluation.

Example:

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

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

  title = "Welcome to Structural Directive Tutorials";

  showElement = true;

  color = "green";

  colors = ['red','green','orange'];

}

<h2>{{title}}</h2>

<!-- This will show only if showElement property is True in component class-->
<p *ngIf="showElement">This is ngIf directive</p>

<!--ngSwitch-->
<div [ngSwitch]="color">
  <div *ngSwitchCase="'red'">This is red</div>
  <div *ngSwitchCase="'green'">This is Green</div>
  <div *ngSwitchDefault>Invalid color</div>
</div>

<!--ngFor-->
<ul>
  <li *ngFor="let color of colors">{{color}}</li>
</ul>

Open the terminal window and enter the below command:

You will see the following on your Browser:

Wednesday, 2 June 2021

Bootstrapping in Angular: How It Works Internally

Bootstrapping in Angular

What is a Bootstrapping

Bootstrapping is a technique of initializing or loading our Angular application.

let’s walk through our code created in Create your First new Angular project and see what happens at each stage and how our AppComponent gets loaded and displays “app works!”. The Angular takes the following steps to load our first view.

Index.html loads
Angular, Third-party libraries & Application loads
Main.ts the application entry point
Root Module
Root Component
Template

Index.html Loads First

Web apps need a starting point. Index.html is usually the first page to load. Let us open the file and find out what it contains. You will find it under the src folder.

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>GettingStarted</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>

<body>

  <app-root></app-root>

</body>

</html>

There are no javascript files in the index.html. Neither you can see a stylesheet file. The body of the files has the following HTML tag.

<app-root></app-root>

How do Angular loads ?. To Find out, let us build our application.

Building Application

To run our application, we use the Angular CLI command ng serve or NPM command npm start (npm start command actually translates into ng serve.)

ng serve does build our application but does not save the compiled application to the disk. It saves it in memory and starts the development server.

We use ng build to build our app. Open the command prompt and run the command. This will build and copy the output files to the dist folder.

ng build

Use ng build --prod to build and distribute the app for production. For testing/debugging use ng build. The production build optimizes, minimize and uglify the code.

Now open the dist and open the index.html.

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>GettingStarted</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>

<body>

  <app-root></app-root>

  <script src="runtime-es2015.js" type="module"></script>

  <script src="runtime-es5.js" nomodule defer></script>

  <script src="polyfills-es5.js" nomodule defer></script>

  <script src="polyfills-es2015.js" type="module"></script>

  <script src="styles-es2015.js" type="module"></script>

  <script src="styles-es5.js" nomodule defer></script>

  <script src="vendor-es2015.js" type="module"></script>

  <script src="vendor-es5.js" nomodule defer></script>

  <script src="main-es2015.js" type="module"></script>

  <script src="main-es5.js" nomodule defer></script></body>

</html>

You can see that the compiler included five script files. They are runtime, polyfills, styles, vendor, & main. All these files have two versions one is es5 & the other one es2015.

runtime.js: Webpack runtime file
polyfills.js – Polyfill scripts for supporting the variety of the latest modern browsers
styles.js – This file contains the global style rules bundled as javascript file.
vendor.js – contains the scripts from the Angular core library and any other 3rd party library.
main.js – code of the application

These files are added by the Webpack module loader.

Full Article: Angular Bootstrapping Internal Working

Mohd Amir Ahmad

Friday, 25 June 2021

Daily Activity Tracker in Angular

Sunday, 20 June 2021

Book Management Project Using Struts and H2 database