Angular Interview Question

 Angular Interview Question

**********Angular Developer Key Skills and things to know**********
1. Angular 7 recommended and Angular latest version with differences
2. Complete life cycle of Angular Project, Project folder structure, Angular Components
3. How to create Component, Service, Model class, Interface, loader, Interceptor
4. What is angular dependency
5. What is Provider, Import, Export in terms of Angular component configuration
6. npm
7. Angular CLI
8. HTML and CSS
9. Angular
10. TypeScript
11. RxJS
12. Git
13. Empathy
14. Testing and Debugging
15. Responsive Design

======================================

Answer every question

============================

1. Interface

=============

1.Interface is a structure that define the syntax of classes to follow

2.Interface define a properties , method,and event which are the member of the 

interface interfacce contain only declaration of the member

Example:

create a a interface file 

1. Employee.ts

export interface Employee{

id:number;

name:String;

add:String;

}

2. its component use any where in our project Ex:

first import a interface and after use it

Import {Employee}

getdata(){

Emp:Employee={

id:111;

name:"Ankit",

add:"hydrabad",

}}

========================================

2. How to create Component, Service, Model class, Interface, loader, Interceptor

===========================================================================

Component: ng g c anyname;

Service: ng g s servicename;

Modelclass: ng g class classname;

Interface : ng g i interfacename;

Angular Loader:Angular loader allows your angular scripts to be loaded in any order.

npm i angular-loader

Interceptor: ng generate interceptor ExampleInterceptor.

npm i angular-http-interceptor

Modify HTTP requests and responses,

Add common headers,

Handle HTTP errors,

Transform request or response data,

Log network events,

Show loading indicators, etc.

Interceptors allow you to centralize common logic for HTTP requests and responses, making your code more modular and easier to maintain.

========================================

3. What is angular dependency

========================================

>Dependency injection is a software design pattern

>Component are given their dependencies no values 

>Makes dependencies configurable

>Make Component reusable , Maintainable and testable.

there are two type Dependency Injector

1*Class Constructo injector:-class constructor di it is a inject to directly class constructor.

==========================

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

@Injectable()

export class Service {

  constructor(private dependency: Dependency) {}

}

2*Property injector:- property di it is a inject a  class property .

======================

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

@Injectable()

export class Component {

  @Inject(Dependency)

  dependency: Dependency;

}

========================================

4.Import / Export /Providers

========================================

1. A module is any code file in your project.

2. An import is a line starting with the import keyword.

Export :

=========

3. An export is a line starting with the export keyword.

4. Import :

=============

imports makes the exported declarations of other 

modules available in the current module

5./Providers:

==========

providers are to make services and values known 

to DI (dependency injection). They are added to the root scope and they

are injected to other services or directives that have them as dependency.

==> Provder are define using the @injectable() decorater and can be configure to @Ngmodule(). or @component().

========================================

5.npm

============================================

What is npm and Ng in Angular?

NPM is basically a package manager which acts as a dependency provider. 

If there are many small packages, required to build a large one,

 NPM is the one hotspot which will provide us with the packages.

 Angular-CLI is one of those packages. 

As far as NG is concerned, it is the core module of Angular.

========================================

6.Angular CLI

========================================

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold,

 and maintain Angular applications directly from a command shell.

Cli:

A command-line interface (CLI) is a text-based user interface (UI) used to run programs, manage computer files and interact with the computer. 

Command-line interfaces are also called command-line user interfaces, console user interfaces and character user interfaces.

========================================

7.Angular

========================================

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. 

It implements core and optional functionality as a set of TypeScript libraries that you import into your applications.

Angular is an open-source, JavaScript framework written in TypeScript. Google maintains it, and its primary purpose is to develop single-page

applications. As a framework, Angular has clear advantages while also providing a standard structure for developers to work with.

========================================

8.TypeScript

========================================

TypeScript extends JavaScript and improves the developer experience. It enables developers to add type safety to their projects. Moreover,

TypeScript provides various other features,like interfaces, type aliases, abstract classes, function overloading, tuple, generics, etc

========================================

9.RxJS

========================================

RxJS provides an implementation of the Observable type, which is needed until the type becomes part of the language and until 

browsers support it. The library also provides utility functions for creating and working with observables. 

These utility functions can be used for:

. Converting existing code for async operations into observables

. Iterating through the values in a stream

. Mapping values to different types

. Filtering streams

. Composing multiple streams

==> Rxjs is a stand to reactive extesion javascript and it's handle a ashycronos event and asychronus data.

rxjs also provide a multiple operator such as map(), filter(), pipe(), reduce().

And it is used to   work with HTTP requests, events and other types of asynchronous operations.

========================================10.Empathy  : npm i empathy

========================================

Empathy can important role in the user experience on  angular application

========================================

11.Responsive Design

========================================

Website is something that is more important and essential for growth of company or business. It is the best way to reach more audience.

Nowadays, each and every user and clients use mobiles phones more than anything and therefore wants a mobile version of website. 

But it’s difficult and sometime impossible to create website versions for each new resolutions and devices.

*Different Features of Responsive Design  

1. Reflowing Content  

2. Relative Sizing  

3. Breakpoints  

4. Adaptation to all Devices  

========================================

12. Complete life cycle of Angular Project, 

========================================

1. ngOnChanges

2. ngOnInit

3.ngDoCheck

4. ngAfterContentInit

5. ngAfterContentChecked

6. ngAfterViewInit

7. ngAfterViewChecked

8. ngOnDestroy

=====================================================

13.git

=====================

git is a devops tool used for a source code management

1.git checkout filename   single file came

2. git checkout -f

3.git status.

4. git log 

5. git log -p -1

6.git commit.

7.git log -p -5

8. git diff

git checkout

In addition to checking out old commits and old file revisions, git checkout is also the means to navigate existing branches. Combined with the basic Git commands, it’s a way to work on a particular line of development.

git clean

Removes untracked files from the working directory. This is the logical counterpart to git reset, which (typically) only operates on tracked files.

git clone

Creates a copy of an existing Git repository. Cloning is the most common way for developers to obtain a working copy of a central repository.

git commit

Takes the staged snapshot and commits it to the project history. Combined with git add, this defines the basic workflow for all Git users.

=========================================================================

15. Angular 15 and Angular 7 diference

=========================================================================

Angular 7 realeased by october 2014 and Angular 15 released a may 2022.

Angular 7 mainly focused by Angular material and the CLI.

it is also know as a new feature such as a drag and drop feature element with same container.

Angualr 15 faster a compare with angular 7 

Angular 15 improved a cheacking a teplate.

Angular 15 improved a css style.

improved support a ecmascript private field

Improved support for web workers

Improved support for string-based enums

=======================================================================================

Angular Life Cycle

=========================================================================

ngOnChanges() Respond when Angular sets or resets data-bound input properties. 

The method receives a SimpleChanges object of current and previous property values.

ngOnInit() Initialize the directive or component after Angular first displays 

the data-bound properties and sets the directive or component's input properties.

ngDoCheck() Detect and act upon changes that Angular can't or won't detect on its own.

 See details and example in Defining custom change detection in this document.

Called immediately after ngOnChanges() on every change detection run, and immediately after ngOnInit() on the first run.

ngAfterContentInit() Respond after Angular projects external content into the component's view, or into the view that a directive is in.

See details and example in Responding to changes in content in this document. Called once after the first ngDoCheck().

ngAfterContentChecked() Respond after Angular checks the content projected into the directive or component.

See details and example in Responding to projected content changes in this document. Called after ngAfterContentInit() 

and every subsequent ngDoCheck().

ngAfterViewInit() Respond after Angular initializes the component's views and child views, or the view that contains the directive.

See details and example in Responding to view changes in this document. Called once after the first ngAfterContentChecked().

ngAfterViewChecked() Respond after Angular checks the component's views and child views, or the view that contains the directive.

Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().

ngOnDestroy() Cleanup just before Angular destroys the directive or component. Unsubscribe Observables and detach event handlers

 to avoid memory leaks. See details in Cleaning up on instance destruction in this document.