Angular Interview Questions







1)  What  is  Angular   and    AngularJS  . 
2)  What are   the building   blocks of   Angular?
4)  What     is    difference between    Angular and JQuery ?
5)  What is  data binding    and  how many way it can be bind in angular?
6)  What is two-way data binding in Angular.  How Parent Child can  communicate?
7)  What   are   advantages of angular ?
8)  What are the various  types  filter are  available in angular js?
Ans. AngularJS provides filters to transform data:
currency -Format a number to a currency format.
date -Format a date to a specified format.
Filter-  Select a subset of items from an array.
json  -Format an object to a JSON string.
limitTo -Limits an array/string, into a specified number of elements/characters.
lowercase -Format a string to lower case.
number - Format a number to a string.
orderBy   -Orders an array by an expression.
uppercase  -Format a string to upper case.

9)  What  is pipe and  what  are builtin pipes are available ?
Ans.  A pipe takes in data as input and transforms it to a desired output. In this page, you'l
use pipes to transform a component's birthday property into a human-friendly date.

Angular comes with a stock of pipes such a  Angular comes with a stock of pipes such DatePipe,UpperCasePipe,LowerCasePipe,CurrencyPipe,and PercentPipe. They are all available for use in any template.They are all available for use in any template.

10)   What  is   component  , module and service ?
11)   What  is  decorator ?
12)  How  we  can call   child to parent component?
13) What are the building blocks of Angular?
 Answer:There are essentially 9 building blocks of an Angular application. These are:
1.Components – A component controls one or more views. Each view is some specific section of the screen. Every Angular application has at least one component, known as the root component. It is bootstrapped inside the main module, known as the root module. A component contains application logic defined inside a class. This class is responsible for interacting with the view via an API of properties and methods.
2.Data Binding – The mechanism by which parts of a template coordinates with parts of a component is known as data binding. In order to let Angular know how to connect both sides (template and its component), the binding markup is added to the template HTML.
3.Dependency Injection (DI) – Angular makes use of DI to provide required dependencies to new components. Typically, dependencies required by a component are services. A component’s constructor parameters tell Angular about the services that a component requires. So, a dependency injection offers a way to supply fully-formed dependencies required by a new instance of a class.
4.Directives – The templates used by Angular are dynamic in nature. Directives are responsible for instructing Angular about how to transform the DOM when rendering a template. Actually, components are directives with a template. Other types of directives are attribute and structural directives.
5.Metadata – In order to let Angular know how to process a class, metadata is attached to the class. For doing so decorators are used.
6.Modules – Also known as NgModules, a module is an organized block of code with a specific set of capabilities. It has a specific application domain or a workflow. Like components, any Angular application has at least one module. This is known as the root module. Typically, an Angular application has several modules.
7.Routing – An Angular router is responsible for interpreting a browser URL as an instruction to navigate to a client-generated view. The router is bound to links on a page to tell Angular to navigate the application view when a user clicks on it.
8.Services – A very broad category, a service can be anything ranging from a value and function to a feature that is required by an Angular app. Technically, a service is a class with a well-defined purpose.
9.Template – Each component’s view is associated with its companion template. A template in Angular is a form of HTML tags that lets Angular know that how it is meant to render the component.
14)   Explain the difference between Angular and AngularJS?
Answer: Various differences between Angular and AngularJS are stated as follows:

Architecture - AngularJS supports the MVC design model. Angular relies on components and directives instead
Dependency Injection (DI) - Angular supports a hierarchical Dependency Injection with unidirectional tree-based change detection. AngularJS doesn’t support DI
Expression Syntax - In AngularJS, a specific ng directive is required for the image or property and an event. Angular, on the other hand, use () and [] for blinding an event and accomplishing property binding, respectively
Mobile Support - AngularJS doesn’t have mobile support while Angular does have
Recommended Language - While JavaScript is the recommended language for AngularJS, TypeScript is the recommended language for Angular
Routing - For routing, AngularJS uses $routeprovider.when() whereas Angular uses @RouteConfig{(…)}
Speed - The development effort and time are reduced significantly thanks to support for two-way data binding in AngularJS. Nonetheless, Angular is faster thanks to upgraded features
Structure - With a simplified structure, Angular makes the development and maintenance of large applications easier. Comparatively, AngularJS has a less manageable structure






Support - No official support or updates are available for the AngularJS. On the contrary, Angular has active support with updates rolling out every now and then

15)   What  is Angular   routing ?

Routing basically means navigating between pages. You have seen many sites with links that direct you to a new page. This can be achieved using routing.  An   example   using Angular 6  is   given below  which  will   explain   angular routing technique  perfectly .  For  further  routing example you
Directly   get  through the  Angular  web site  git .

             Use command  in terminal -- ng new angular-router-sample 



 Here   you  need to   provide  you  email  to download  as  I   required.
which  Here the pages that we are referring to will be in the form of components.
In the main parent component app.module.ts, we have to now include the router module as shown below −

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }
import { RouterModule} from '@angular/router'
Here, the RouterModule is imported from angular/router. The module is included in the imports as shown below −

RouterModule.forRoot([
   {
      path: 'new-cmp',
      component: NewCmpComponent
   }
])
RouterModule refers to the forRoot which takes an input as an array, which in turn has the object of the path and the component. Path is the name of the router and component is the name of the class, i.e., the component created.

Let us now see the component created file −

New-cmp.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}
The highlighted class is mentioned in the imports of the main module.

New-cmp.component.html
<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>
Now, we need the above content from the html file to be displayed whenever required or clicked from the main module. For this, we need to add the router details in the app.component.html.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>
<br />
<br/>
<router-outlet></router-outlet>

16)    What are  the life cycle hooks  of the  angular ? Explain   it?


17) What are directives in Angular?
A directive is a class in Angular that is declared with a @Directive decorator.
Every directive has its own behaviour and can be imported into various components of an application.

When to use a directive?
Consider an application, where multiple components need to have similar functionalities. The norm thing to do is by adding this functionality individually to every component but, this task is tedious to perform. In such a situation, one can create a directive having the required functionality and then, import the directive to components which require this functionality.

Types of directives
Component directives
These form the main class in directives. Instead of @Directive decorator we use @Component decorator to declare these directives. These directives have a view, a stylesheet and a selector property.

Structural directives
These directives are generally used to manipulate DOM elements.
Every structural directive has a ‘ * ’ sign before them.
We can apply these directives to any DOM element.

Let’s see some built-in structural directives in action:
    
      <div *ngIf="isReady" class="display_name">
          {{name}}
      </div>


      <div class="details" *ngFor="let x of details" >
          <p>{{x.name}}</p>
          <p> {{x.address}}</p>
          <p>{{x.age}}</p>
      </div>
    
  
In the above example, we can *ngIf and *ngFor directives being used.

*ngIf is used to check a boolean value and if it’s truthy,the div element will be displayed.

*ngFor is used to iterate over a list and display each item of the list.

Attribute Directives

These directives are used to change the look and behaviour of a DOM element. Let’s understand attribute directives by creating one:

How to create a custom directive?

We’re going to create an attribute directive:

In the command terminal, navigate to the directory of the angular app and type the following command to generate a directive:
ng g directive blueBackground
The following directive will be generated. Manipulate the directive to look like this:
    
      import { Directive, ElementRef } from '@angular/core';

      @Directive({
       selector: '[appBlueBackground]'
      })
      export class BlueBackgroundDirective {
       constructor(el:ElementRef) {
         el.nativeElement.style.backgroundColor = "blue";
       }
      }
    
  
Now we can apply the above directive to any DOM element:
    
      <p appBlueBackground>Hello World!</p>
    
  
18)   What  is  JIT ( Just in time ) and  AOT  (Ahead of time)  compilation ? 
         What are the benefit of  AOT it? 

19) How  angular application works ? 

20) What is angular.json ,app.main.ts , app.module.ts, app.component.ts  What is the  workflow 
      of these?


   









Angular Interview Questions Angular   Interview Questions Reviewed by Mukesh Jha on 11:27 PM Rating: 5

No comments:

Add your comment

All Right Reserved To Mukesh Jha.. Theme images by Jason Morrow. Powered by Blogger.