Blog

Angular is one of the most popular and open sources Front-end or Client-side scripting framework for building Mobile and Desktop Apps. Angular is written in TypeScript language and It is compiled into JavaScript. Angular community has released the latest version Angular 8 on 28 May 2019.This version contains some of new features, lot of performance and Workflow Improvements.

• Angular Ivy
• Support for TypeScript (Higher Version)
• Support for Bazal
• Support for Web Worker Bundling
• New changes in ViewChild and ContentChild
• Builder API and Workspace APIs in the CLI (Command Line Interface)
• Differential Loading by Default
• Improvements in AngularJS Migration
• Lazy Loading with Dynamics Imports
• Opt-in usage sharing
• Angular Firebase
• Use of SVG as a template

The Main Building blocks of Angular are:

• Directives
• Modules
• Components
• Meta Data
• Templates
• Data Binding
• Dependency injection
• Services

Service is a broad category encompassing any value, function, or feature that app needs. A service is typically a class with an arrow, well defined purpose.

$ ng g service myservice

The above command generates sleleton myservice class in src/appmyservice.service.ts.

It is used to transform data. It is denoted by symbol “|”.

Syntax:

{{ title | uppercase }}

• Lowercase Pipe
• Uppercase Pipe
• Data Pipe
• Decimal Pipe
• Percent pipe
• Currency Pipe
• Slice Pipe
• JSON pipe

ng g pipe myfirst

this will create a new file called myfirst. pipe.ts. After, Open myfirst. pipe ts

A directive modifies or manipulate the DOM by changing the appearance, behaviour or layout of DOM elements. Angular Directives are basically a js Class.

There are three different directives:

• Component directives
• Attribute Directives
• Structural Directives

Angury is an Application inspection tool for angular which runs in a web browser. It runs as your chrome browser extension for the developer’s tool panel.

Ivy is the new compiler/runtime of Angular. It is the code name for angular’s next generation compilation and rendering pipeline. Or It is a complete rewrite of the angular render which is the part of angular that transforms your angular templates into JS code.

Bazel is build tool developed and used by Google. The angular community is working to integrate Bazel tool in to the standard angular toolset to enable developers to perform faster builds on large projects

Ng stands for A ‘ng ‘ular. It is a Prefix. All of the built-in directives that craft with angular use that Prefix.

Open angular CLI and write the following syntax to create a new library

Syntax:  ng generate library my-library.

 It is allowing to add/remove DOM element.

It will enable us to add/remove Dom element. It is same as the switch statement C#.

It is used to repeat apart of HTML template once per each item from an iterable list

It used to add/remove CSS class

It is used to modify the style of an HTML element using expression and also used to change the styles of HTML element dynamically.

A module is created by using the angular function angular.module

<div ng-app=””interviewgig””>…</div>

 <script>

 var app= angular.module(“interviewgig”,[]);

 </script>

The httppClient get() method is designed to send Http gGet requests.

Check The below syntax:

get(url: string, options: {

      headers?: HttpHeaders;

      observe: ‘response’;

      params?: HttpParams;

      reportProgress?: boolean;

      responseType?: ‘json’;

      withCredentials?: boolean;

}): Observable<HttpResponse<Object>>;

It takes attest API endpoint and an optional options object and returns an observable instance

Pros:

• Reusability
• Easy and Clean Code Development
• Higher Performance
• Ivy renderer
• Unit testing
• Angular Elements
• Better Angular CLI
• It supports multiple apps in one domain

Cons:

• Steep Learning curve
• Angular is verbose and very Complex
• Third party integration is complicated
• Hard to debug Limited routing
• Angular CLI Documentation