Top 50 Interview Questions In Angular

May 29, 2022 0 974

Ashmita

Most-Asked Interview question-answer  In Angular:

Question 1: What is Angular?

  • Angular is a platform and component-based framework for building single-page and scalable client applications using HTML and Typescript.
  • it is used as an easy and powerful way of building front-end web-based applications.

Question 2: What is ng-template?

  • Angular element used rendering HTML into Template.
  • it is not directly used on the DOM
  • you can give a specific condition value for the display ng-template text value.
<div *ngIf="canEdit; else noEdit">
<p>you can edit following paragraph</p>
</div>

<ng-template #noEdit>
<p>Content for else part</p>
</ng-template>

Question 3: Dependency Injection in Angular?

  • it is a coding pattern in which the class received its dependencies from an external source rather than creating itself.

Step1: specified the dependencies in your component.

import { Component, OnInit } from '@angular/core';
import { RoleServiceProxy } from 'shared/service-proxies/services/role.service';

@Component({
  selector: 'app-role',
  templateUrl: './role.component.html',
  styleUrls: ['./role.component.scss']
})

export class RoleComponent implements OnInit {
 constructor(private _roleservice: RoleServiceProxy) { }
}

Step2: Registrar your dependency in provider under the @NgModel in your app.module.ts

@NgModule({
    declarations: [
        AppComponent 
    ],
    imports     : [
        BrowserModule,
        BrowserAnimationsModule
    ],
    providers: [RoleServiceProxy],
    bootstrap   : [
        AppComponent
    ]
})

Question 4: What is the Export keyword?

  • A feachers module can declare its own component and service, but some the visible can other modules, you need to export them, in case you can declare the export section to shipping module so it looks as follow.
@NgModule({
import:[commonModule],
declaration:[PatientComponent],
export:[PatientComponent]
})

export class PatientModule { }

Question 5: What is the Import keyword?

  • The Import Keyword enables one script to declare that it needs to use exported members from another script.
import {Provider} from './Provider'

Question 6: Life Cycle Method in Angular?

  1. Constructor
  2. ngOnChanges
  3. ngOnInit
  4. ngDoCheck
  5. ngAfterContentInit
  6. ngAfterContentChecked
  7. ngAfterViewInit
  8. ngAfterViewChecked
  9. ngOnDestroy

Question 7: What is package.json?

  • npm, install packages that are identified in a package.json file.
  • package.json file includes a starter set of packages.
  • If you can also create your own package.json file using the angular CLI command ng new package.json

Question 8: What is this?

  • it is a point to object of a particular method.
  • this keyword expression depends on the location in which refresh occurs
  • in the constructor, member function, and member expression, this is a class instance of the type containing class.

Question 9: Arrow Function?

  • it is a shorthand way to write the small function.
  • let num = [10,15,20,25,30,35];
  • let largerThanTwentyFive = num.filter(num => num > 25);

Question 10: difference between var and let keyword?

  • let:- Use the let keyword to declare the variable if it is limited scope.
  • – if you declare in any block of code then its scope is only in this block.
let a = 10; alert(window.a);  //undefine
let a = 'hello'
let a = 'world'; //syntax error identifier a has already has declare
  • var:- Using declare a variable using var then this variable scope is global.
var a = 10;  alert(window.a); //10
var a = 'hello'
var a = 'world1' //if no problem to replace the value

Question 11: Decorators in Angular?

  • decorator is a function that is attach metadata to class, method, accessor, property, and parameter
  • it applies with @expression.
  • it is only the typescript feature, not the javascript.

Question 12: What is a pipe?

  • the pipe is the transfer value in an angular template.
  • it is used by full feachers in angular.
  • In Angular 2 Types of Pipe:-
  1. Built-In pipe (please refer to this https://www.thecodehubs.com/built-in-pipes-in-angular/)
  2. customer pipe

Question 13: What is the use form?

  • Creating HTML elements Using Users can log in, update their personal info(profile), Enter sensitive(use full) information and validate its info and perform many other Tasks.
  • In Angular 2 Types of Forms:- 
  1. Template-Drive Form (Used Two-way binding(used NgModel) each field data)
  2. Reactive-Form (used Form group,FormBuilder,ResctiveFormModule)

Question 14: What is a class-based component?

  • If it is very simple If you can create New Class In Angular.
  • And that class contains the property and method.
  • If property store data & method include login of code using in the component.

For Example:- Create one component (using CLI).

ng g component task

Then it looks like this.

import { Component, OnInit } from '@angular/core';

@Component({
       selector: 'app-task',
       templateUrl: './task.component.html',
       styleUrls: ['./task.component.css']
})

export class TaskComponent implements OnInit{
        
        constructor() { }
        ngOnInit():void { }

}

Question 15: view child in angular?

  • Interaction of class and its component and same HTML template using the @ViewChild

Let’s learn Examples for better understanding.

Step1: Declare the template reference variable in your HTML template

<input #nameref type="text" [(ngModel)]="firstName">

Step2: Declare in your component.ts file

@ViewChild('nameRef') nameElementRef: ElementRef;

ngAfterViewInit()
{
   this.nameElementRef.nativeElement.focus();
}

Step3: output: – If your page is loaded the first time then focus on this input.

Question 16: What is Template-driven form?

  • Template-Driven Form is used Two-Way Data Binding.
  • if Form is used for the ngForm directives
  • if controls are set up using the ngModel directive

For Example:-

Step1: app.module.ts

import { FormsModule } from '@angular/forms';   //import FormModule

@NgModule({
    imports: [FormsModule]   //Add in import Array
})
Step2: app.component.html
<form #studentForm="ngForm" (ngSubmit)="onSubmit(studentForm)">
    <div class="row">
         <div class="col-6">Name</div>
         <div class="col-6"><input type="text" name="name" ngModel></div>
    </div>
    <div class="row">
         <div class="col-6">Email</div>
         <div class="col-6"><input type="text" id="email" name="email" ngModel></div>
    </div>
    <div class="row">
         <div class="col-6">Gender</div>
         <div class="col-6"><input type="radio" value="male" name="gender" ngModel> Male
         <input type="radio" value="female" name="gender" ngModel> Female</div>
    </div>
    <div class="row">
         <div class="col-6">Hobbie</div>
         <div class="col-6"><input type="checkbox" name="isTravelling" ngModel></div>
    </div>
    <div class="row">
         <div class="col-6">Country</div>
         <div class="col-6">
           <select name="country" ngModel>
              <option [ngValue]="c.id" *ngFor="let c of countryList">{{c.name}}</option>
           </select>
         </div>
    </div>
    <div class="row">
         <div class="col-12"><button type="submit">Submit</button></div>
    </div>
</form>

Step3: app.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Template driven forms';
 
  countryList:country[] = [
    new country("1", "India"),
    new country('2', 'USA'),
    new country('3', 'England')
  ];
}
 
export class country {
  id:string;
  name:string;
 
  constructor(id:string, name:string) {
    this.id=id;
    this.name=name;
  }

  onSubmit(studentForm) {
    console.log(studentForm.value);
  }
}

Question 17: state management in angular?

  • state management is a way to store data, reuse it in many places and dynamically update it in the background.
  • NgRx is a group of libraries powering state management for Angular Application

Question 18: What is Typescript?

  • TypeScript is a superset of javascript.
  • TypeScript is a strong typed, object-oriented, compiled language.
  • TypeScript contains additional feachers of javascript.
  • it was designed by Anders Hejlsberg at Microsoft.

Question 19: What are Template literals?

  • Template Literals use back-ticks(“) rather than quotes(“”) to define string.
  1. Back-Tics  –  let text = `The CodeHubs`
  2. Quotes Inside String – let text = `The “CodeHubs”`
  3. interpolation – let firstName = “The”;  let LastName = “Code” ;  let text=`${firstName} ${LastName} Hubs`;

Question 20: What is the context menu?

  • if you right click on window than open one pop-up  menu it’s call context menu.
  • if you can right click on windows than open (undu,New,property,copy,past)
  • if you right click on word(undu,copy,past)/excell(edit cell,add new cell)
  • In Angular used ngx-contextmenu package.

app.component.html

[contextmenu]="basicMenu" [contextmenusubject]="item.name"

app.component.ts

@viewChild(ContextMenuComponent) public basicMenu: ConetxtMneuComponent;

Question 21: What is @Input @Output?

@Input – Getting data parent to Child Component.

@output – Getting data from child to parent Component.

Let’s understand using the below example:

parentComponent.html

<p>parent works!</p>
<h2>{{child}}</h2>
<app-child [parent]="parent" (newchildData)="getdatafromchild($event)"></app-child>

parentComponent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  public parent = 'parentdata';
  public child = '';

  constructor() { }

  ngOnInit(): void { }

  getdatafromchild(data:any)
  {
    this.child = data;
  }

}

childComponent.html

<p>child works!</p>
<div><h2>{{parentData}}</h2></div>
<div><button (click)="sendData()">Send Data Parent:</button></div>

childComponent.ts

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';
import { Output } from '@angular/core';
import { EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input('parent') parentData = '';
  @Output() newchildData:EventEmitter<string>=new EventEmitter();
  outputMessage = 'Child Data';

  constructor() { }

  ngOnInit(): void { }

  sendData()
  {
    this.newchildData.emit(this.outputMessage);
  }

}

Question 22: What is ng-content?

  • If you declare <ng-content> in the template that have been replace the content of that place if (you can declare ng-content)

For Example:

app-zippy-basic.ts

selector: 'app-zippy-basic',
template:
`
<h2>Single-slot content projection</h2>
<ng-content></ng-content>
`

app.component.html

<app-zippy-basic>
<p>Is content projection cool?</p>
</app-zippy-basic>

o/p:- Single-slot content projection
Is content projection cool?         //This content has been replacing the place of ng-content.

Used Multiple

<ng-content select="[question]"></ng-content>
<p question>This content of the projection.</p>

Question 23: What is @Directive?

  • Directives are classes that add additional behavior to elements in your Angular Application.
  • Use Angular’s built-in directive to manage forms, lists, styles, and what users see.

Angular can support these types of directives:

  1. Component
  2. Attribute directive
  3. Structural directive

Question 24: What is Guard in angular?

  • The guard helps us to secure the route or to perform some actions before navigating into a route or leaving the route.
  • Angular Supports 5 types of Guard:
  1. CanActivate
  2. CanDeactivate
  3. Resolve
  4. CanLoad
  5. CanActiveChild

Question 25: What is Lazy Loading?

  • Used for increasing the speed of your application.
  • if any angular application that has 2 module rootmodule(AppModule),  feachermodule(it’s so many).
  • if your application is loaded than all the root and its feachers module can be loaded.
  • then sometimes your application is growing and the feachers module size will be increased so it will take so much time to load your module illegally.
  • Unless using Lazy loading all the module is loaded illegally its associated component, directive, pipes, and services must be downloaded to the server if the first login the application.
  • In short, Asynchronized Routing loads teachers module lazily, on demand.This can significantly reduce the initial load time of your application.

{path:’admin’,loadChildren()=>import(‘./adminmodule/adminmodule.module’).then(m=>m.AdminmoduleModule)}

For better understand please Review This Example: 

ng g component home
ng g component customer
ng g component product
ng g component order

ng g module customermodule
ng g module productmodule
ng g module ordermodule

app.routing.module.ts

import { HomeComponent } from ‘./home/home.component’;
import { LoginComponent } from ‘./login/login.component’;

const routes: Routes = [
{path:”,component:LoginComponent},
{path:’home’,component:HomeComponent},
{path:’customer’,loadChildren:()=> import(‘./customermodule/customermodule.module’).then(m => m.CustomermoduleModule)},
{path:’product’,loadChildren:()=> import(‘./productmodule/productmodule.module’).then(m => m.ProductmoduleModule)},
{path:’order’,loadChildren:()=> import(‘./ordermodule/ordermodule.module’).then(m => m.OrdermoduleModule)}
];

(make sure)
imports: [RouterModule.forRoot(routes)],

customermodule.module.ts

import { CustomerComponent } from ‘../customer/customer.component’;

const routes: Routes = [
{ path: ”, component: CustomerComponent }
];

imports: [
CommonModule,
RouterModule.forChild(routes) [make sure add]
]

productmodule.module.ts

same as above

ordermodule.module.ts

same as above

  • in Above Example If you can perform each component for that module.

Question 26: What is Routing?

  • A process of defining the navigation element and the associated view is called the routing in Angular.

app.routing.module.ts

import { HomeComponent } from './home/home.component';
{path:'home',component:HomeComponent}

app.loginComponent.ts

import { Router } from '@angular/router';
constructor(private router:Router) { }
onSubmit()
{
   this.router.navigate(['home']);
}
make sure define this line in your main component app.component.html
<router-outlet></router-outlet>

Question 27: What is a Reactive Form?

  • The reactive form provides a model-driven approach to handling form input whose values change over time.

Implemantation:

Step1: app.module.ts

import { ReactiveFormsModule } from '@angular/forms';
imports: [ReactiveFormsModule]

Step2: app.component.ts

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
constructor(private fb:FormBuilder) { }
loginform!: FormGroup;
ngOnInit(): void
{
      this.loginform = this.fb.group({
      txtusername:['',Validators.required],
      txtpassword:['',Validators.required,Validators.minLength(6)] 
      });
}
get getForm()
{
   return this.loginform.controls;
}
onSubmit()
{
      this.submitted = true;
      console.log(this.loginform.value);
}

Step3: app.component.html

<form [formGroup]="loginform" (ngSubmit)="onSubmit()">
      <input formControlName="txtusername" name='txtusername'>
      <input formControlName="txtpassword" name='txtpassword'>
      <button type="submit">
</form>

Question 28: What is Interceptor?

  • Interceptor is unic style of Angular service that we can implement.
  • it allows intercepting incoming and outgoing HTTP requests.
  • if the user can call any API request then first call the interceptor and then after calling your API.

Implementation: 

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest,HttpResponse,HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { EmployeeService } from './employee.service';
import { AuthGuard } from './auth.guard';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Router } from '@angular/router';


@Injectable({
  providedIn: 'root'
})
export class TockeninterceptorService implements HttpInterceptor {

  constructor(private EmployeeService:EmployeeService,public auth:AuthGuard,private router:Router) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
  {
      var gettocken = localStorage.getItem("tocken");
      const getdata = gettocken; 
      if(getdata)
      {
        req = req.clone({
          setHeaders:
          {
            Authorization: 'Bearer ' + JSON.parse(getdata)           
          }
        });
      }
     
      return next.handle(req).pipe(
        catchError((error: HttpErrorResponse)=>{
          let errorMsg = '';
          let data = {};
          if(error.error instanceof ErrorEvent)
          {
            console.log("This is client side error");
            errorMsg = `Error: ${error.error.message}`;
          }
          else
          {       
            switch(error.status)
            {
              case 401:
                data = 
                {
                  status:error.status
                }
                this.router.navigate(['login']);
                break;
              case 403:
                this.router.navigate(['login']);
                break;
              case 404:
                this.router.navigate(['notfound']); 
                break; 
            }
            console.log('this is server side error');
            errorMsg = `Error Code: ${error.status},  Message: ${error.message}`;
          }
          console.log(errorMsg);
          return throwError(errorMsg);
        })
      )
  }
}

Question 29: What is Localization?

  • Localization is the process of transforming your application into a particular language.

Question 30: What is Interpolation?

  • interpolation refers to embedding expression into marked-up text.
  • interpolation used double curly brace characters as a delimiter.
template:`<div>inline tmplate</div>`
<h2>hello</h2>
<h2>welcome {{name}}</h2>
<h2>{{2+2}}</h2>
<h2>{{"welcome" + name}}</h2>
<h2>{{name.length}}</h2>
<h2>{{name.toUpperCase()}}</h2>
<h2>{{greetUser()}}</h2>
<h2>{{siteurl}}</h2>`,

export class MessageComponent implements OnInit
{
      public name = "asmita";
      public siteurl = windows.location.href;
}

Question 31: What is Property Binding?

  • property binding is a one-way data-binding technique. In property Binding.
  • we bind a property of a DOM element to a field which is a defined.
template:`<div>inline tmplate</div>
<h2>hello</h2>
<h2>welcome {{name}}</h2>
<h2>{{2+2}}</h2>
<h2>{{"welcome" + name}}</h2>
<h2>{{name.length}}</h2>
<h2>{{name.toUpperCase()}}</h2>
<h2>{{greetUser()}}</h2>
<h2>{{siteurl}}</h2>`
<input [id]="myId" type="text" value="asmita">
<input bind-disabled or [disabled] ="isDisabled" id="{{myId}}" type="text" value="asmita">`

export class MessageComponent implements OnInit
{
     public name = "asmita"; 
     public siteurl = windows.location.href;

     public myId="testId"; 
     public isDisabled = false;
}

Question 32: What is Class Binding?

  • class binding in Angular sets the class property of a view element.
  • we can change the class property in the Html elements in your Angular HTML template.
template:<h2 [ngClass]="messageClass">Codevolution</h2>`,

export class MessageComponent implements OnInit
{
          public successclass ="text-success";
          public haserror = true;
          public isSpecial = true;
          public messageClass =
          {
                  "text-success":!this.haserror,
                  "text-danger":this.haserror,
                  "text-special":this.isSpecial
          }
}

Question 33: What is Style and Event Binding?

Style Binding

  • The Style Binding is the easy way to set a single style of an HTML element.

For Example:

<h2 [style.color]="haserror ? 'red' : 'green'">style binding</h2>
<h2 [style.color]="heighlightcolor">style binding</h2>
<h2 [ngStyle]="titlestyle">style binding</h2>

public heighlightcolor = "orange";
public titlestyle = { color:"blue",fontstyle:"italic"}

Event Binding

  • event Binding is used to handle the events raised by the user actions like button click, mouse movements, and keystrokes.
<button (click)=onClick()>button</button>
<button (click)=onClick($event)>button</button>
<h2> {{greeting}} </h2>
<h2> {{geteventname}} </h2>

onClick()
{
       console.log(event);
       this.greeting = "welcome to TheCodeHubs";
       //this.geteventname = event.type;
}

onClick(event)
{
       this.geteventname = event.type; //o/p click
}

Question 34: What is Template Reference Variable?

  • The Template Reference Variable is a reference to any DOM element, component, or directive in the Template.
  • Use the #variable to create a reference to it.

Example:

<input #myInput type="text">
<button (click)="logMessage(myInput.value)">Log</button>
<h2> {{getData}} </h2>

logMessage(value: any)
{
       console.log(value);
       this.getData = value;
}

Question 35: What is Observable?

  • you can define custom events that send observable output data from a child to a parent component.
getDataEmployee(): Observable<IEmployee[]>
{
       return this.http.get<IEmployee[]>(this._url);   
}

Question 35: What is Subscribe?

  • The Subscribe is getting some changed value using the observable.
this.employeeSevice.getDataEmployee().subscribe(
       (employee: Employee[]) => this.employee  = employee,
       (error: any) => this.errorMessage = <any>error
);

Question 36: Wild Card Routing in Angular?

  • Wild card Route in Angular you use **(double asterisk) sign.
  • this Routing is used in Angular Application to handle invalid URLs.

For Example:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StudentComponent } from './student/student.component';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent} from './pagenotfound/pagenotfound.component';
const routes: Routes = [
  {
    path:'', redirectTo:'Login',pathMatch:'full'
  },
  {
    path:'student', component:StudentComponent
  },
  {
    path:'Login', component:LoginComponent
  },
  {
    path:'**', component:PageNotFoundComponent
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Question 37: What is service?

  • Service is defined with some code that contains functionalities or your API call code.
  • This Code maintains the accessible and reusable in more than one component in your project.

 For Example:

Step1: Create a component.

ng g c student

student.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})
export class StudentComponent implements OnInit {
public student = [
    {'id':1, 'name':'ashmita', 'phoneno':9999988888},
    {'id':2, 'name':'krishna', 'phoneno':8888877777},
    {'id':3, 'name':'manasvi', 'phoneno':8888866666},
    {'id':4, 'name':'heema', 'phoneno':7777788888},
    {'id':5, 'name':'ankita', 'phoneno':8888899999}
  ]
constructor() { }
ngOnInit(): void {
  }
}

student.component.html

<h2>
   This is List Of Student
</h2>
<ul *ngFor="let stud of student">
    <li>
        {{stud.name}} {{stud.phoneno}}
    </li>
</ul>

Step3: Now, Create service

ng g s data

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class DataService {
constructor() { }
getList(){
    return[
      {'id':1, 'name':'ashmita', 'phoneno':9999988888}, 
      {'id':2, 'name':'krishna', 'phoneno':8888877777}, 
      {'id':3, 'name':'manasvi', 'phoneno':8888866666}, 
      {'id':4, 'name':'heema', 'phoneno':7777788888}, 
      {'id':5, 'name':'ankita', 'phoneno':8888899999}
    ];
  }
}

Step4:  inject your service into app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { StudentComponent } from './student/student.component';
import { DataService } from './data.service'
@NgModule({
  declarations: [
    AppComponent,
    StudentComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step5: Use service in your component.

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})
export class StudentComponent implements OnInit {
public student = []
constructor(private list: DataService) { }
ngOnInit(): void {
    this.student = this.list.getList();
  }
}

Question 37: What is the starting point of Angular?

  • The Bootstrap method starts the angular application.
  • It contains the AppModule and it is in the app folder.

Question 38: Types of Directives?

There are 3 types of Angular Directive:

  1. component
  2. Attribute Directive
  3. Structural Directive

Question 39: Angular version and its features?

Angular 2

  • written entirely in typescript.
  • mobile-oriented.
  • support ES5, ES6, Typescript, or Data to write Angular 2 code.

Angular 3

  • it is skipped because the @angular/router

Angular 2 is also support

@angular/core
@angular/compiler
@angular/compiler-cli
@angular/router
@angular/http

Angular 4

  •  Remove extra code being imported into our production bundle.
  • Through easily manage animation by importing
    import {BrowserAnimationModule} from @angular/platform-browser/animation. into NgModule
  • Support Typescript 2.1 up to 1.8

Angular 5

  • API and DOM support
  • compiler improvements
  • initialized Number, Date, and currency pipes.
  • @angular/http is replace with @angular/common/http.
  • Angular Form update Blur/submit
  • RxJS 5.5 supported

Angular 6

  • Angular CLI 6 (new command[ngupdate,ngadd]) & Material 6.
  • RxJS v6

Angular 7

  • Angular CLI 7 & Material 7.
  • virtual scrolling, drag and drop
  • ng new & ng add @angular/material
  • Typescript 3.1
  • RxJS 6.3

Angular 8

  • Angular CLI 8 & Material 8.
  • ng build,ng test,ng run.

Angular 9

  • Angular CLI 9 & Material 9.
  • lvy compiler and run by default.
  • smaller the size bundle.
  • faster testing.
  • better debugging.
  • improve CSS class & style.
  • Type checking
  • build errors
  • Angular material new component
  • youtube player component.
  • Google Maps Component.
  • Typescript 3.7

Angular 10

  • Angular CLI 10 & Material 10.
  • Angular Material (Date Range picker)
  • optional strictly setting
  • Typescript 3.9
  • TSLib updated v2.0
  • TSLint updated v6
  • New Default Browser
  • configuration

Angular 11

  • popular bug Fixes & new feachers.
  • RouterLink: incorrect relative link if defined in component have empty path[#13011]
  • FormGroup & FormControl (status changes are not emitted on creation).
  • i18n: Able to use translation strings outside a template.
  • Use ng serve –hmr

Angular 12

  • Tailwind CSS support
  • passing context HTTP interceptor
  • strict mode enable by default

Question 40: Why use Dependency injection in Angular?

For Example:

  • The Resone Behind Give the simple example
  • If First Create Three classes first-class create an object of Engine Class then in the Engine Class give that property if that time throw the error in your car class then need the dependency to inject in your class.
class car{
   engine,
   tire
   constructor()
   {
         this.engine = new Engine();    //here give the error
         this.tire = new Tire();
   }
}

class Engine()
{
       constructor(newparameter) {}
}

class Tire()
{
      constructor() {}
}

Question 41: What is a singleton?

  • Angular provides the singleton if the create single instance if the service is provided.

Question 42: What is Rxjs?

  • Reactive Extension for javascript or Rxjs is a reactive library used to implement reactive programming to deal with async implementation, callbacks, and event-based programs.

Question 43: What is a router outlet?

  • Router-outlet in Angular works as a placeholder which is used to load different components dynamically based on the active component and current state route.
  • <router-outlet></router-outlet>

Question 44: Difference between router and route-outlet?

  • Router-Outlet – is emit an active event when a new component is initiated, and a reactive event when a component is destroyed.
  • Router – user is Moved to a different view as they have to perform and navigate to another View using the router.

Question 45: What is HttpClient?

  • Angular Provide the Client HTTP API for Angular Applications, The HttpClient Service class in @angular/common/http.

Question 46: What is an inline Template?

  • The Component defines an inline template in the @component decorator.
  • if it is a single line rather than a Double Line.
  • single Line template contains a single or double quote.
  • Multiline Line template contains under the backquotes sign(“).

For Example:

Single Line

@Component({
    selector: "app-student",
    template: "<h1>The Codehubs</h1>"
})

Multi-Line

@Component({
    selector: "app-greet",
    template: `<div>
     <h1>Welcome To</h1><br>
     <h2>The CodeHubs</h2>
    </div>`
})

Question 47: What is inline style?

  • Very Limited ho used CSS in your application then used the inline style.

For Example:

@Component({
  selector: 'app-student',
  templateUrl: './app-student.component.html',
  styles: ['h1 { color:red }']
})

Question 48: Difference uses of @ViewChild?

  • Directive
  • Child Component
  • DOM element

Question 49: What is View encapsulation?

  • View Encapsulation in Angular is a strategy have determined how angular hide the style define in the component for bleeding over to the other part of the application.

Question 50: Difference between Angular and AngularJs?

  • Angular: Based on Typescript.
  • AngularJs: Based on JavaScript.
  • Angular: Typescript is a superScript of ES6.
  • AngularJs: it is used terms and controllers.
  • Angular: Angular is mobile-supported oriented.
  •  AngularJs: It does not support mobile-oriented.

Ashmita

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories