Most asked Angular Interview Questions – Mostly In Leve1 / Round1

 

We are back again with our Interview preparation guide. Here is some most asked angular interview questions specially in your round1 for judging your in depth knowledge of Angular . These are few basic question to judge your understanding and crack you the Angular interview in a easy way.

1 . What is Angular ?

Angular is a Type-Script based open-source web application framework, developed and maintained by Google. It offers an easy and powerful way of building front end web-based applications and empowers the front end developers in curating cross-platform applications. It integrates powerful features like declarative templates, an end to end tooling, dependency injection and various other best practices that smoothens the development path.

2. Why Angular ?
The main purpose of using Angular is to create fast, dynamic, and scalable web applications with ease, using components and directives.

§  Great support by Google, thus making the platform user-friendly and trustworthy.

§  A component-based architecture where the application is divided into functional and logical components that are independent of each other

§  Reusable code and third-party components like Angular Material are available

§  Rendering is very fast

§  CLI support

§  Excellent doucumentation and Support

§  Open Source

§  Best for SPA (Single Page Application)

3. Essential building blocks Off Angular

Templates: Templates are written in HTML and contain Angular elements and attributes. Models provide a dynamic view to the user by combining information from the controller and view and rendering it.

Directives: Directives allow developers to add new HTML syntax, that is application-specific.

Services: Rather than calling the Http service, Angular allows for the creation of new service classes. When new Services are created in Angular, they can be used by different components.

4. Angular vs Angular-JS Difference

Angular JS	Angular
Based on JavaScript	Based on TypeScript
Follows MVC design pattern	It has components, modules, and directives
No support for mobile app	Support Web and Mobile
Dependancy Injection support is not well	Full Dependancy Injection support
No SEO Support	Best SEO Support for available on every search engine
Requires specific ng directive for each of property, event, and image	For event binding, () is used and for image or property binding [] is used

5. What Is Angular CLI?
Angular CLI automates the end-to-end development process. we can create a new project, add new features, and run tests (unit tests and end-to-end tests) by just typing a few simple commands. This way, development and testing processes both become faster.

6. Angular Life Cyle
Life-Cycles includes all the events which occurred from Application start to application End or destroy .

ngOnChanges( ): This method is called whenever one or more input properties of the component changes. The hook receives a SimpleChanges object containing the previous and current values of the property.

ngOnInit( ): This hook gets called once, after the ngOnChanges hook.

It initializes the component and sets the input properties of the component.

ngDoCheck( ): It gets called after ngOnChanges and ngOnInit and is used to detect and act on changes that cannot be detected by Angular.

We can implement our change detection algorithm in this hook.

ngAfterContentInit( ): It gets called after the first ngDoCheck hook. This hook responds after the content gets projected inside the component.

ngAfterContentChecked( ): It gets called after ngAfterContentInit and every subsequent ngDoCheck. It responds after the projected content is checked.

ngAfterViewInit( ): It responds after a component’s view, or a child component’s view is initialized.

ngAfterViewChecked( ): It gets called after ngAfterViewInit, and it responds after the component’s view, or the child component’s view is checked.

ngOnDestroy( ): It gets called just before Angular destroys the component. This hook can be used to clean up the code and detach event handlers.

7 . Differance between ngOnInit and Constructor

Both are not inter-related with each other . Constructor is a class concept i.e Type-Script and ngOnInit is a Angular Concept .

ngOnInit	Constructor
NgOnInit is Angular Concept or it’s a Angular life cycle hook method	Constructor is TypeScript concept
Called by Angular	Called by JavaScript Engine
Invoked by Angular when component is initialized	Called by JavaScript Engine
You can access DOM elements as well as variables and services in NgOnint event	Used for initialize variables and Inject dependencies
Everything is ready at the time of invocation	Component is not yet initialized

8. How does an Angular application work?

How application work means the flow of application. Flow means how the files are called and in which sequence of files the app gets executed when we are developing it.

Flow of application Execution In Angular :-

§  Angular.json

§  Main.ts

§  App.Module.ts

§  App.Component.ts

§  Index.html

§  App.Component.html

 

Read More

Angular Application Flow - Behind The Scenes Detailed Explanation

How application work means the flow of application. Flow here is how the files are called and in which sequence of files the app gets executed when we are developing it.
So here I am providing the files detail who are comes under application work flow.

1.      Angular.Json

Every Angular app consists of a file named angular.json. It is the file which has various properties and configuration of your Angular project. While building the app, the builder looks at this file to find the entry point of the application. Following is an image of the angular.json file:

“build”: { “builder”: “@angular-devkit/build-angular:browser”, “options”: { “outputPath”: “dist/angular-starter”, “index”: “src/index.html”, “main”: “src/main.ts“, “polyfills”: “src/polyfills.ts”, “tsConfig”: “tsconfig.app.json”, “aot”: false, “assets”: [ “src/favicon.ico”, “src/assets” ], “styles”: [ “./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css”, “src/style.css” ] } }

1.     

Inside the build section, the main property of the options object defines the entry point of the application which is main.ts.

2.      Main.ts

This file acts as the entry point of the application. 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. These two steps are performed in the following order inside the main.ts file:

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

 

platformBrowserDynamic().bootstrapModule(AppModule)

In the above line of code, AppModule is getting bootstrapped.

3.      AppModule.Ts

From the main.ts file, it is very clear that we are bootstrapping the app with AppModule. This AppModule is defined in APP.MODULE.TS file which is found in

/src/app/app.module.ts

This is the module, created with the @NgModule decorator, which has declarations of all the components we are creating within the app module so that angular is aware of them. Here, we also have imports array where we can import other modules and use in our app. Below is an example of app.module.ts file with a test component declared and two modules imported.

Below is an example of app.module.ts file:

import { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’; import { AppComponent } from ‘./app.component’; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], entryComponents: [], bootstrap: [AppComponent] }) export class AppModule { }

As one can see in the above file, AppComponent is getting bootstrapped. This component is defined in app.component.ts file.

4.      App.Component.Ts

This is the file which interacts with the html of the webpage and serves it with the data. The component is made by using @Component decorator which is imported from @angular/core.
Each component is declared with three properties:

1.    Selector – used for accessing the component

2.    Template/TemplateURL – contains HTML of the component

3.    StylesURL – contains component-specific stylesheets

Below is an example of app.component.ts file:

import { Component } from ‘@angular/core’; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.css’] }) export class AppComponent { title = ‘angular’; }

By this time, compiler has all the details about the components of the app and now they are ready to be used.

5.      Index.html

Here, the index.html file is called. It is found in the src folder of the app. Compiler dynamically adds all the javascript files at the end of this file. Since all the components are now known, the html file calls the root component that is app-root. The root component is defined in app.components.ts which targets app.component.html. This is how index.html file looks like :

//   <!doctype html>       // <html lang=”en”>       // <head>       //   <meta charset=”utf-8″>       //   <title>Angular</title>       //   <base href=”/”>       //   <meta name=”viewport” content=”width=device-width, initial-scale=1″>       // </head>       // <body>       //   <app-root></app-root>       // </body>       // </html>

When this angular app is served and opened in the browser, the scripts injection is done by the compiler .

6.      App.Component.Html

This is the file which contains all the html elements and their binding which are to be displayed when the app loads. Contents of this file are the first things to be displayed. 

Read More

Start with .Net Core - Dot Net Core Overview

 

What is .Net Core

Microsoft using .Net to Build Web , Mobile and windows applications and now they launch .Net core in this field. Its a advancement of .Net framework in Web field. Lots of new things are added in .Net Core. The main advancement is Cross Platform. .Net core is a cross platform and open source technology, it can be used to develop applications on any platform.

 

Microsoft managing Both the framework .Net and .Net Core. .Net core is open source while in other hand for .Net framework Microsoft still charging for their services.

Although .Net core is a advancement of.Net Framework but you can’t say it's a superset of .Net libraries or it has all the features of .Net. It does not have some .NET features or support all libraries and extensions.

As Per Microsoft ".NET Core is an open-source, general-purpose development platform. You can create .NET Core apps for Windows, macOS, and Linux for x64, x86, ARM32, and ARM64 processors using multiple programming languages."

.NET Core Features -

• Cross platform: Runs on Windows, macOS, and Linux operating systems.
• Open source: Any one can use .NET Core without spending a penny .
• Consistent across Architectures
• CLI Support
• Compatibility
• Flexible Development
• Modern Technology - Uses Async Programming and Dependency Injection etc
• Support for Microservices

Features .NET Core Don't have -

• Windows Forms and WPF applications are not supported.
• No support for ASP.NET WebForms.
• No Support for WCF Services. You need to create Rest API .
• Missing third party libraries when you move from .NET Framework to .NET Core.
• Not fully supported for VB.Net and F#.

 

.NET Core Version History

Version	Latest Version	Visual Studio	Release Date	End of Support
.NET 5	Preview 1	VS 2019	16th March, 2020
.NET Core 3.x - latest	3.1.3	VS 209	24th March, 2020	12th March, 2022
.NET Core 2.x	2.1.17	VS 2017, 2019	24th March, 2020	21st August, 2021
.NET Core 1.x	1.1.13	VS 2017	14th May, 2019	27th May, 2019

 

 

Read More

Everything about Angular From v1 - v12 - 2021

Angular is a platform where you can build Web and Mobile Application. It is a JavaScript open-source front end Web-Application framework.

Angular is specially developed to create efficient SPA(Single Page Applications).

You can build your Application by suing Html and types script. Angular works with type script and It is also written in TypeScript.

Many people around the globe confused about AngularJS and Angular. So this article is prefect for you all guys where you will learn the evolution of Angular. 

This article does not intend to be a guide to learn about its feature and architecture, rather it tries to summarize and provide a evolution of Angular over time.

Angular has a long history of version updates

AngularJS was created, as a side project, in 2009 by two developers, Misko Hevery and Adam Abrons. They created a end-to-end tool that allowed web dev and designers to interact with both the frontend and the backend.

On a Confrance Misko Hevery talked about his journey where he eventually began working on a project at Google called Google Feedback. Hevery and 2 other developers wrote 17,000 lines of code over the period of 6 months for Google Feedback. However, as the code size increased, Hevery began to grow frustrated with how difficult it was to test and modify the code the team had written.

So Hevery made the bet with his manager that he could rewrite the entire application using his side GetAngular project in two weeks. Hevery lost the bet. Instead of 2 weeks it took him 3 weeks to rewrite the entire application, but he was able to cut the application from 17,000 lines to 1,500 lines. 

Because of Hevery’s success, his manager took notice, and Angular.js development began to accelerate from there.

Hevery and his manager and Brad started working with GetAngular and renamed it to AngularJs with few advancement. They build a team and maintain this AngularJs with Google.

Google started their support with AngularJs and invested more resources on to it.

As you all know Angular is a open source framework. So many top contributors were non Googlers but they all were hired by Google when the started working continuously with AngularJS.

AngularJS 1.x 

• Angular 1.x is mainly referred as AngulaJs or Anguar.js.
• Written in JavaScript.
• Open Source Framework .
• Maintained by Google.
• Initially released on Oct2010.

Angular 2

• It is rewrite of AngularJs or Angular 1.x by AngularJs developers team. Known as Angular 2.
• Release in Sept 2016.
• Written in TypeScript.
• You can write scripting in TypeScript.
• Supports Mobile application.

Angular 3

It is skipped bcause of mismatch version of @angular/core, @angular/compiler and @angular/router libraries.

So Angular team skipped this version to sync up the all versioning mismatch.

Angular 4

• Released in March 2017.
• No major changes in this. It is same as Anguar 2.
• To make Httprequests from App they introduce HttpClient.
• FCompilation becomes faster and few Bug fixes.

Angular 5

• Released in Nov 2017.
• Make Angular 5 light weighted as compare to 4.
• @angular/http module was used to make Http request. But no it is replaced with @angular/common/http library.
• While exporting you can give multiple names to your component.

Angular 6

• Released in May 2018.
• Updated Angular Command Line interface(Angular CLI). In this new commands added like ng-update to migrate from the previous version to current version and ng-add to quickly add application features to make the application progressive web apps.
• Angular material Updated.
• Component Development Kit Updated.
• FormBuilder supports multiple validators.

Angular 7

• Release in Oct 2018.
• Angular CLI updated and it supports intellisense support. Means it prompts commands while typing i.e @ng new. ng add etc.
• Supports drag and Drop interface.

Angular 8

• Released in May 2019.
• Loading of modern JavaScript, dynamic imports for lazy routes, support for web workers.

Angular 9

• Released in Nov 2019.
• This is the current version of Angular. 
• Faste testing, debugging.
• Visual Studio Code and WebStorm will benefit from some improvements. For example, the URL definition will become more consistent. Style URLs will be checked in the same way as template URLs.

Angular 10

• New Date Range Picker
• Enhanced Community Engagement
• Boost in ngcc Performance
• Compiler Update
• Async Locking Timeout
• Optional Stricter Settings  ( ng new –strict ) -  After allowing this flag, it starts with the new project using some new settings that enhances maintainability, allows the CLI for performing advanced optimizations on the app, and helps catch bugs properly beforehand.

Angular 11

• Faster Builds
• Webpack 5 Support
• Improved Logging and Reporting
• Automatic Font Inlining

Angular 12

• Ivy Everywhere (View Engine will be removed from Angular)
• Goodbye Protractor
• Deprecating Support for IE11
• Nullish Coalescing supports 

Before - {{ result !== null && result !== undefined ? result : calculateResult() }}

Now - {{ result ?? calculateResult() }}

• New update in i18n Message IDs

Hope you like this post. Keep us update via your comments if you have any doubt or post need some correction.

Read More

Read List With In List Collection Using LINQ - Increase Application Data Performances

Introduction
In this article we will learn about how to read data from a SubList or list with in list collection. How to access sub list properties and how to get sublist property value using a single Linq line. 

How to perform ForEach  In Linq and perform faster execution.

Sometime while doing development, we faced some issue when retrieving and reading  data from List collection. When we have multiple list or list with in lists than it is a heptic situation to write lots of foreach loop in c# to read list item.

Foreach of c# is now tradional approach to iterate through loop but after linq comes in light , most of us prefer to write linq  simple and more effective single line querie to read data by using lambda expression or query expression.

Demo List

public class MainList {   public string MainListName { get; set; }   public List<SubList> SubLists { get; set; } } public class SubList {   public int SubListID { get; set; }   public string SubListName { get; set; } }

Write Data Into List Using Console Application

class Program  {    static List<MainList> MainListData = new List<MainList>();    static void Main(string[] args)    {        FillDataInList();        Console.ReadLine();    }    static void FillDataInList()    {        for (int i = 1; i < 5; i++)        {            MainList tempList = new MainList();            tempList.MainListName = "MainList Item " + i;            tempList.SubLists = new List<SubList>();            SubList objSublist = new SubList();            objSublist.SubListID = i;            objSublist.SubListName = "SubList Item" + i;            tempList.SubLists.Add(objSublist);            MainListData.Add(tempList);        }    } }

Read data using Traditional approach and using Linq

foreach (var item in MainListData)  {      foreach (var subListItem in item.SubLists)      {          Console.WriteLine(subListItem.SubListName);      }        }  //Using LINQ  var SubListNames = MainListData.Select(x => x.SubLists)                     .SelectMany(x => x)                     .Select(x => x.SubListName).ToList();

Nested List Example

foreach (var company in Company) {    foreach (var employee in company.Employees)    {     foreach (var department in employee.Departments)     {      foreach (var team in department.Team)      {         //Read List here          if ( team.Technology == "Xamarin")         {            //do some code here          }      }    }  } }  //Using LINQ   var listofList = Company.SelectMany(c => c.Employees                 .SelectMany(t => t.Departments                 .SelectMany(r => r.Team)))                 .Where(jp => jp.Technology = "Xamarin")                 .ToList();         }

Read More