Top 10 Angular 8/9 Interview Questions and Answers to Know in 2020

Top 10 Angular 8/9 Interview Questions and Answers to Know in 2020

Top 10 Angular 8/9 Interview Questions and Answers to Know in 2020

Top 10 Angular 8/9 Interview Questions and Answers to Know in 2020

Q1:- difference between Promise and Observable in Angular?

Ans: - Promises:
 return a single value
 not cancellable
 more readable code with try/catch and async/await
Observables:
 work with multiple values over time
 cancellable
 support map, filter, reduce and similar operators
 use Reactive Extensions (RxJS)
 an array whose items arrive asynchronously over time

Q2:- What is AOT (Ahead-Of-Time) Compilation?

Ans: - Each Angular app gets compiled internally. The Angular compiler takes in the JS code, compiles it and then produces some JS code. This happens only once per occasion per user. It is known as AOT (Ahead-Of-Time) compilation.

Q3:- What is ngOnInit ()? How to define it?

Ans: - ngOnInit () is a lifecycle hook that is called after Angular has finished initializing all data-bound properties of a directive.

Q4:- Angular 8: Explain Lazy Loading in Angular 8?

Ans:- Lazy loading is one of the most useful concepts of Angular Routing and brings down the size of large files. This is done by lazily loading the files that are required occasionally.
Angular 8 comes up with support for dynamic imports in our router configuration. This means that we use the import statement for lazy loading the module and this will be understood by the IDEs, webpack, etc.
Angular7:

Angular 8:

New with Angular 8, loadChildren expects a function that uses the dynamic import syntax to import your lazy-loaded module only when it’s needed. As you can see, the dynamic import is promise-based and gives you access to the module, where the module’s class can be called.

Q5:-What is the code for creating a decorator?

Ans: We create a decorator called Dummy.
function Dummy(target) {
dummy.log('This decorator is Dummy', target);
}

Q6: How to generate a class in Angular 7 using CLI?

Ans: ng generate class Dummy [options]

Alternative- use URL link- https://update.angular.io/

Q8:-. What are advanced Angular CLI commands?

Ans: - Some of the best Angular CLI commands that enhances developers’ productivity are

  1. ng-new – Generate new angular projects
  2. ng-generate – Generate components using the Angular CLI
  3. ng-serve – Run your app with just this command
  4. ng-eject – Pull the ripcord

Output:- highlight me!

Q10:- What are the key components of Angular?

Ans:- The key components of Angular are Components, Modules, templates, services and metadata.
Components are basic building blocks that control HTML views. Modules are the set of these building blocks like components, directives and many others. Simply put, each logical piece of code is a module. Templates represent the views of the angular application. With Metadata, you can add more data to Angular class.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Learn the Basics of Angular 9 Tutorial

Learn the Basics of Angular 9 Tutorial

## Angular 9 Tutorial Learning Outcomes We'll learn about concepts like Angular modules, components, and directives. We'll also learn about Angular template syntax which includes interpolation, event binding, and property binding, etc. For the...

Angular 9 Tutorial Learning Outcomes

We'll learn about concepts like Angular modules, components, and directives.

We'll also learn about Angular template syntax which includes interpolation, event binding, and property binding, etc.

For the example that we'll be building, it's a simple calculator application that implements the basic calculus operations.

You'll learn from this tutorial:

  • How to install the latest version of Angular 9 CLI,
  • How to initialize a new Angular 9 project,
  • Understand and work with modules and components,
  • Understand Angular template syntax, particularly event and property bindings,
  • Listen for click events and update the UI when data changes.
Angular 9 Tutorial Steps

These are the steps:

  • Step 1 - Installing Angular CLI 9
  • Step 2 - Initializing our Project
  • Step 3 - Understanding Angular Modules & Components
  • Step 4 - Adding our HTML Template and Styles
  • Step 5 - Understanding Angular Template Syntax
  • Step 6 - Listening for Click Events on the Buttons and Get their Associated Values
  • Step 7 - Displaying the Value of Variables in the Template

Check out the tutorial

Upgrade Angular 8/7 to Angular 9 With Ng Update & Angular CLI v9

Upgrade Angular 8/7 to Angular 9 With Ng Update & Angular CLI v9

Updating Angular CLI to v9 and upgrading your project to Angular 9 from v8/7 is now easier than ever before, thanks to all the work that has been done in version 9 and the ng update command which allows you to update specific versions and...

Updating Angular CLI to v9 and upgrading your project to Angular 9 from v8/7 is now easier than ever before, thanks to all the work that has been done in version 9 and the ng update command which allows you to update specific versions and dependencies.

How to Implement AES Encrypt and Decrypt Data in Angular 8

How to Implement AES Encrypt and Decrypt Data in Angular 8

In this article, You’ll learn how to implement AES encryption and decryption in Angular 8 while developing an application.

Introduction

In this article, You’ll learn how to implement AES encryption and decryption in Angular 8 while developing an application.

Concepts

The AES is the advanced encryption standard. So, these algorithms have been the standard of encryption for organizations like the NSA and anyone else that wants to hide their data. So, it’s a critical part of the computer science curriculum. that you should understand if you’re a software developer.

Actually, DES and AES were both developed to solve the same problem in 1971. this algorithm was invented by two Belgian cryptographers, Vincent Rijmen and Joan Daemen. IBM was the inventor of this algorithm called DES. it gradually became insecure and crackable as computer software or as computer hardware.

In the late 1990s, the government the NSA, in particular, decided that they needed to have an improved algorithm. so they put open a worldwide search and took ideas from fifteen different groups. then they create something that has been a standard for now over 20 years so these algorithms are known as symmetric ciphers.

You would have a single password or key that would encrypt your document and then that same key is going to unlock the document. so that key is important the alternative to symmetric encryption is called asymmetric encryption.

When to use AES Encryption

1. If you want to encrypt confidential data into a decryptable format, for example – if you need to send some sensitive data via e-mail.

2. The decryption of the encrypted data is possible only when you know the right password.

Now, It is very easy to implement the AES encryption and decryption in Angular 8 with the help of crypto-js.

Let’s, create a new project with the below command.

ng new EncryptionDescryptionSample

After that, we need to install a crypto.js file, by the below command.

npm install crypto-js --save  

For better responsive UI, we also install bootstrap by the below command.

npm install bootstrap --save  

Now, Let’s go an open “app.component.html” file and replace the existing code with the following code.


<h1 class="text-center">Encrypt-Decrypt with AES</h1>  
<br>  
<div>  
  <div class="row">  
    <div class="col-sm-6">  
      <button type="button" class="btn btn-primary btn-lg btn-block">  
        Encryption  
      </button>  
      <br>  
      <div class="form-group">  
        <label for="txtTextToConvert">Plain Text</label>  
        <input type="text" class="form-control" placeholder="Enter text you want to encrypt" [(ngModel)]="plainText">  
      </div>  
  
      <div class="form-group">  
        <label for="txtPassword">Password</label>  
        <input type="password" class="form-control" placeholder="Enter encryption password" [(ngModel)]="encPassword">  
      </div>  
      <textarea class="form-control" readonly rows="3">{{conversionEncryptOutput}}</textarea>  
      <br>  
      <button type="button" class="btn btn-success float-right" (click)="convertText('encrypt')">Encrypt</button>  
    </div>  
    <div class="col-sm-6">  
      <button type="button" class="btn btn-dark btn-lg btn-block">  
        Decryption  
      </button>  
      <br>  
      <div class="form-group">  
        <label for="txtTextToConvert">Encrypted Text</label>  
        <input type="text" class="form-control" placeholder="Enter text you want to decrypt" [(ngModel)]="encryptText">  
      </div>  
  
      <div class="form-group">  
        <label for="txtPassword">Password</label>  
        <input type="password" class="form-control" placeholder="Enter decryption password" [(ngModel)]="decPassword">  
      </div>  
      <textarea class="form-control" readonly rows="3">{{conversionDecryptOutput}}</textarea>  
      <br>  
      <button type="button" class="btn btn-success float-right" (click)="convertText('decrypt')">Decrypt</button>  
    </div>  
  </div>  
</div>

After that, open “app.component.ts” file and write the following code, we used the Encrypt method of AES and passed our plain text with a password to encrypt the string. then Similarly, we used the Decrypt method of AES and passed our encrypted text with a password to decrypt the string. Be assured that both times, your password we’ll be the same. so, using both of these methods, you just need to import “CryptoJS” from crypto-js libraries.

import { Component } from '@angular/core';  
import * as CryptoJS from 'crypto-js';  
  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'EncryptionDecryptionSample';  
    
  plainText:string;  
  encryptText: string;  
  encPassword: string;  
  decPassword:string;  
  conversionEncryptOutput: string;  
  conversionDecryptOutput:string;  
    
  constructor() {  
  }  
  //method is used to encrypt and decrypt the text  
  convertText(conversion:string) {  
      if (conversion=="encrypt") {  
        this.conversionEncryptOutput = CryptoJS.AES.encrypt(this.plainText.trim(), this.encPassword.trim()).toString();  
      }  
      else {  
        this.conversionDecryptOutput = CryptoJS.AES.decrypt(this.encryptText.trim(), this.decPassword.trim()).toString(CryptoJS.enc.Utf8);  
       
    }  
  }  
}  

Now, Run the project by using the below command.

ng serve --o

Here is the output.

I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others. Thank you !