Angular Interview Question & Answers for Experienced - Part 1

Angular Interview Question & Answers

What is difference between Angular JS and Angular?

Angular JS
Angular JS is open-source JavaScript frameworks, developed by Google in 2009 & version 1.0 was released in 2012.
Angular JS is JavaScript based Framework. It use HTML as a template language. It extends HTML elements by adding tags. attributes and expressions.
Architecture of Angular JS is based on Model-View-Controller (MVC) Design.
Angular JS use ng directive to implement binding.
Angular JS was not designed for Mobile application.
Angular JS have $scope , $rootscope for bindings.
Angular JS is easy to setup and start.

Angular
Angular 2 is completely re-written over Angular JS. Angular 2 is designed around the concept of Component.
Angular is based on Typescript that is developed By Microsoft. Typescript is Static Typing Language and based on Object Oriented Features.
Angular use () for event binding and [] for property binding.
Angular 2 and latest version are completely support Mobile Responsive design.
Angular have component and directives for binding.
It is not easy as Angular JS to setup and start. You should have good knowledge of Typescript as well.

for more details you can read this article..
https://www.simplilearn.com/angularjs-vs-angular-2-vs-angular-4-differences-article

Can we use JavaScript with Angular?

Yes. We can use JavaScript with Angular because JavaScript is a subset of TypeScript. We can also use JavaScript Libraries with Angular.

What are new features in Angular 8?

Differential loading
Based on browserlist file, Angular creates separate bundles during its build process. So it reduce bundle size.
Read here How we implement it :
https://auth0.com/blog/angular-8-differential -loading/

SVG as a template
You can now use SVG files as a template. Till now, we only had the option to use inline HTML or external HTML as a template.

Ivy rendering engine
Ivy compiler is still in experimental phase. We can test it by creating an app with enable-ivy flag set to true.

Lazy loading Changes
Before we use a string in loadChildren to load module lazily that’s why it can not tested at compile time. But In Angular 8 we pass import statement of that module and if there is any error it will be cached during compile time.

$location API Support
Angular 8 added a new API Support $location with in angular/common/upgrade.

WebWorker
Angular 8 is now ready to give support web workers. We can create web worker by command
> ng g webworker .

markAllAsTouched Method
A new method has been added by Angular team to mark all controls as touched in reactive Forms.

What is difference between Angular 5 & Angular 6?

Angular 6
New Command addedv> ng update & ng add
Can add single dependencies with command ng add.
Angular CLI will update your current angular dependencies to thier latest versions.

Support for RxJS 6
Angular 6 added support of RxJS 6 that is third party library.

Before we do like:
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';

Now we can import these with a single package 
 import { Observable, Subject } from 'rxjs';

New file introduced 'angular.json'
CLI replaced angular.cli.json file to angular.json file.

ng-template directive
Angular 6 introduced <ng-template> and now <template> tag is deprecated.

ProvidedIn: Root
Previously to accessing a service to the entire application we add that in to providers [] in app.module.ts file. Now with Angular 6 simply write @Injectable({providedIn: 'root'}) in service file to access it globally.

Angular 5

HttpClient Angular 5 added new HttpClient API that is more secure, faster and efficient than Http.

Build Optimizer Build Optimizer creates smaller sized build.

Multiple Alias We can define multiple names for components and directives.

Angular Material Update Angular material mat directive updates started with Angular 5.

Explain Angular Component Life Cycle Look?

ngOnChanges()
ngOnInit()
ngDoCheck()
ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()
ngAfterViewChecked()
ngOnDestroy()

Read more here on Angular DOC:
https://angular.io/guide/lifecycle-hooks

What is use of ngDoCheck()?

ngDoCheck() event is simply called on every change detection cycle. This event calls after ngOnInit();

What is View Child and Content Child in Angular?

ViewChild and ContentChild are decorators that are used to communicate between Components in Angular.

Any Directive, Components or Element which is part of template is ViewChild. We use ViewChild or ViewChildern decorator to access ViewChild.
Any Component or Element which is projected in the template is ContentChild. We use <ng-content> to create ContentChild and we can access these by ContentChild or ContentChildren Decorator.

 //app.component.ts file
 @ViewChild(ToDoComponent) todoViewChild: ToDoComponent;
 
    ngAfterViewInit() {
        console.log(this.todoViewChild);
    }

//app.component.html file
<div>
<app-todo></app-todo>
</div>

// Create Add Component
@Component({
  selector: 'app-add',
  template: `
  <div>
  <ng-content></ng-content>
  </div>
  `
})

//Create Add Container Component File

@Component({
  selector: 'app-add-container',
  template: `
  <div>
  <app-add>
    <h1>This is first advertisement.</h1>
  </app-add>
  </div>
  `
})

export class AddContainerComponent implements AfterContentInit {
  @ContentChild(AddComponent) addComponnetContentChild: AddComponent;
  ngAfterContentInit() {
      console.log(this.addComponnetContentChild);
  }
}

What is difference between ViewChild and ViewChildren?

If you want to get a Child Component, Directive or DOM element, You can use ViewChild decorator.

@ViewChild() – It returns first element that matches selector.
@ViewChildren() – It returns all element that matches selector.

What is difference between ngAfterViewInit() and ngAfterContentInit()?

ngAfterViewInit() method we use with ViewChild while ngAfterContentInit() method is used with Content Child.
To access or update Properties of View Child – it may be a Dom element, child component or a Directive, we use afterViewInit() method while to access or update properties of Content Child – a element or component that is projected, we use contentInit() method.

What is difference between Transpile & Compilation?

Both performs same function to tranform from one code to other code but have some differnce:

Transpiler transforms code from a high level programming language to another high level programming language.
In Angular, compiler takes the TypeScript code and converts it into JavaScript. This process is commonly referred to as transpiling.

Compiler transforms code from high level programming language to low level programming language that is machine code. So Simply Compiler makes programs executable.

What is difference between Constructor & ngOnInit() method?

Constructor is a method of Typescript and ngOnInit() is method of Angular. ngOnInit is called after the constructor is executed. In Constructor, Angular initializes and resolves all dependencies & Class members and then in ngOnInit() we can use that classes and implement our component Logic.

Can we use multiple router outlet in a application?

Yes we can use multiple router outlets. There are two different routes First one is Primary Route and second one is Named Route or Auxiliary Route.

<router-outlet></router-outlet>  -- This is Primary Route
<router-outlet  name="taskRouter"></router-outlet> -- Auxiliary Route
<router-outlet  name="listRouter"></router-outlet>   -- Auxiliary Route 

// How to perform Navigation:

{
   path: "",
   component: TaskComponent,
   outlet: "taskRouter"  --- we add outlet property with path and component
},

// How to use with routerLink 
<a [routerLink]="[{ outlets: { primary: ['productList'], listRouter: ['TodoList'] } }]">
    Check out List
</a>

What is main.ts file and ts.config.json file?

Main.ts
This is entry point of angular application. Purpose of this file is to compile application with JIT Compiler and bootstraps the application Root Module (AppModule) to run in the Browser.

tsconfig.json
Default TypeScript configuration for projects in the workspace.

Read here File Structure of Angular application:
https://angular.io/guide/file-structure

What is difference between dependencies and DevDependencies in pacakge.json file?

DevDependencies are modules which are required during development only, while dependencies are module which are also required at run time.

npm install --save-dev command is used to install dependency as DevDependencies instead of npm install –save.

How we can change default component app.component by some other component?

Root module file which we have in Angular is app.module.ts, here we have bootstrap config where we define root component. Default root component is AppComponent. So we can change from here and put any other component as default. One more thing which we need to update is in index.html that is selector.
In Index.html we can see a tag <app-root></app-root>, so we can replace this with our component selector.

What is use of base href in Index.html page?

We have seen <base href="/"> line in index.html of Angular project. With this line we determine how all assets are going to load with relative path. Most of the time this line is same as local & server but sometimes we need to update this as per our deployment path.

What is difference between http and httpclient?

Introduce
Http come from Angular 2 and HttpClient introduced in Angular 5 (Angular version 4.3+).

Path
HttpModule is in @angular/http while HttpClientModule is in @angular/common/http.

Response Type
In Http we parse response as Json ‘response.json()’ while in HttpClient we don’t need of parsing data as JSON because it is default.

Parse Non-JSON data
In Http we use response.arrayBuffer(), response.blob(), response.text() to parse data while in httpclient we simply paas {responseType: ‘blob’} with request.

Reading Response
In http full response returns by Client but in httpclient we add
{ observe: ‘response’ } with request.

How to write if else and switch statement in Angular?

IF-Else statement:
 <div *ngIf="isValid;else other_content">
                put your content here ...
            </div>
            
  <ng-template #other_content>other content here...</ng-template> 

Switch Statement:

  <div [ngSwitch]="switch_expression">
                <div *ngSwitchCase="match_expression_1">...</div>
                <div *ngSwitchCase="match_expression_2">...</div>
                <div *ngSwitchDefault>...</div>
         </div>

What is pure pipes in Angular?

There are two categories of pipes: pure and impure. Pipes are pure by default. Pure Pipes transform input data into output data. Pure pipes only executes when input data got any changes. It does not execute during a angular change detection cycle. Pure pipes are also called as Stateless Pipes.

 @Pipe({
  name: 'myCustomPipe', 
  pure: false / true  // By default it is true.
})
export class MyCustomPipe {}

What is Impure Pipes in Angular?

Impure Pipes also have some properties with its transform() method. When we define pipe as Impure (pure : false) then whenever Angular’s change detection occurred, it will check output of the pipe, whether it’s input data has changed or not. These are also called as Stateful Pipes.

When we use Impure Pipes in Angular application?

To understand use-case of Impure Pipe read here…
https://stackoverflow.com/questions/34456430/ngfor-doesnt-update-data-with-pipe-in-angular2

Learn JavaScript Top Interview questions and answers…
https://www.jsmount.com/javascript-interview-questions-answers-for-experienced-part-1/
Also visit https://angular.io