AngularJS Interview Questions and Answers

angularjs interview questions and answers

AngularJS Interview Questions and Answers

AngularJS is very popular for its effective feature set; hence this technology is worthy to learn and become a master. AngularJS Interview Questions are designed specially by our team to enhance everyone’s skills on AngularJS. The questions provided here begin with some fundamental topics and later to continue with the entire complicated questions. Also, you can get some ideas on each concept as we have assisted with examples and sample data. Using our questions and answers, you will get an idea of how to build high performance and large-scale web applications without any hassles. The topics handled by our expert team are AngularJS overview, MVC Architecture, Directives, Modules, Scopes, AJAX, Forms, Filters & Tables, Controllers, Services and the list goes on. Get ready to crack the interviews simply and excel in your career with the job roles like AngularJS Developer, Java Developer, Web Developer, Web Designer, and App Developer.

In case you’re searching for AngularJS Interview Questions and answers for Experienced or Freshers, you are at the correct place. There is a parcel of chances from many presumed organizations on the planet. The AngularJS advertise is relied upon to develop to more than $5 billion by 2020, from just $180 million, as per AngularJS industry gauges. In this way, despite everything you have the chance to push forward in your vocation in AngularJS Development. Gangboard offers Advanced AngularJS Interview Questions and answers that assist you in splitting your AngularJS interview and procure dream vocation as AngularJS Developer.

Best AngularJS Interview Questions and Answers

Do you believe that you have the right stuff to be a section in the advancement of future AngularJS, the GangBoard is here to control you to sustain your vocation. Various fortune 1000 organizations around the world are utilizing the innovation of AngularJS to meet the necessities of their customers.

AngularJS is being utilized as a part of numerous businesses. To have a great development in AngularJS work, our page furnishes you with nitty-gritty data as AngularJS prospective employee meeting questions and answers. AngularJS Interview Questions and answers are prepared by 10+ years of experienced industry experts. AngularJS Interview Questions and answers are very useful to the Fresher or Experienced person who is looking for a new challenging job from the reputed company. Our AngularJS Questions and answers are very simple and have more examples for your better understanding. By this AngularJS Interview Questions and answers, many students are got placed in many reputed companies with high package salary. So utilize our AngularJS Interview Questions and answers to grow in your career.

Q1) How do you add form validation to a form built with FormBuilder?

Ans:this.username = new FormControl(‘user’, Validators.required);

Q2) What’s the difference between dirty, touched, and pristine on a form element?

Ans:

  • dirty – interacted to control
  • touched – focus to control
  • prestine – not interacted to control

Q3) How can you access validation errors in the template to display error messages?

Ans:

*ngIf=”name.invalid && (name.dirty || name.touched)”

*ngIf=”name.errors.required”

Q4) What is async validation and how is it done?

Ans: async will check for duplicate entry. its done using HTTP service and bind control with map

Q5) What is the purpose of NgModule?

Ans: to export component, service, directives, and pipes to other modules inside an application

Q6) How do you decide to create a new NgModule?

Ans: when there is a common usage of a feature in an application.

Q7) What are the attributes that you can define in an NgModule annotation?

Ans: declare module and import components and services

Q8) What is the difference between a module’s forRoot() and forChild() methods and why do you need it?

Ans:

forRoot() = service register to entire application

forChild() = service register to particular child component

Q9) What would you have in a shared module?

Ans: core independent directives, pipes, and components

Q10) What would you not put shared module?

Ans: dependent directives, pipes, and components

Q11) What module would you put a singleton service whose instance will be shared throughout the application (e.g. ExceptionService andLoggerService)?

Ans:

LoaderService

Q12) What is the purpose of exports in a NgModule?

Ans: to expose them to the imported module

Q13) What is the difference between exports and declarations in NgModule?

Ans:

export visible to other imported module

a declaration will make component visible inside the module

Q14) Why is it bad if SharedModule provides a service to a lazily loaded module?

Ans: dependency to other non-lazy modules

Q15) What is the use case of services?

Ans: to share data across components

Q16) How are the services injected to your application?

Ans: constructor(private myService:MyService){}

Q17) How do you unit test a service with a dependency?

Ans:

Using TestBed

TestBed.configureTestingModule({

providers: [AuthService]

});

Q18) Why is it a bad idea to create a new service in a component like the one below?

Ans: bad question – no sample provided

Q19) What is the possible order of lifecycle hooks.

Ans:

  • ngOnChanges()
  • ngOnInit()
  • ngAfterViewInit()
  • ngOnDestroy()

Q20) When will ngOnInit be called?

Ans: after angular displays first bound properties

Q21) How would you make use of ngOnInit()?

Ans: set default values from observable services

Q22) What would you consider a thing you should be careful doing on ngOnInit()?

Ans: not understandable

Q23) What is the difference between ngOnInit() and constructor() of a component?

Ans:

  • constructor – injecting services and declaration
  • ngOnInit – to assign values and use services

Q24) What is a good use case for ngOnChanges()?

Ans: respond when data inbound to component

Q25) What is the difference between an observable and a promise?

Ans:

  • observable are cancelable and use subscribe
  • promise are non-cancelable and always returns

Q26) What is the difference between an observable and a subject

Ans:

A RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers. While plain Observables are unicast

(each subscribed Observer owns an independent execution of the Observable), Subjects are multicast.

A Subject is like an Observable, but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners.

Q27) What are some of the angular apis that are using observables?

Ans: Angular HTTP uses observables

Q28) How would you cache an observable data?

Ans:

We need the following things to implement caching in observables:

  • An injectable cache service
  • Ability to set an expiration for each item.
  • An Observable based service
  • Ability to track on the fly requests so duplicate requests are never made.

Q29) How would you implement a multiple API calls that need to happen in order using rxjs?

Ans:

Method 1:

this.http.get('/api/url').subscribe(data => {

this.http.get(/api/url/data).subscribe(data1 => {

// code goes here

});

});

Method 2:

Using "MergeMap"

this.http.get('/api/url').pipe(

mergeMap(character => this.http.get(character.homeworld))

);

Q30) What is the difference between switch map, concatMap, and mergeMap?

Ans:

switchMap: unsubscribing from the last mapped observable, when the new one arrives.

concatMap: Queuing up every new Observable, and subscribing to a new observable only when the last observable completed.

mergeMap: deciding not to do anything, basically, we just keep subscribing to every new observable that we return from the map.

Q31) How would you make sure an API call that needs to be called only once but with multiple conditions. Example: if you need to get some data in multiple routes but, once you get it, you can reuse it in the routes that need it, therefore no need to make another call to your backend APIs.

Ans: I can store data in a  singleton service, which its object is created once and it won’t get destroyed throughout the application. So even routes get changes the data will be available in other routes

Q32) If you need to respond to two different Observable/Subject with one callback function, how would you do it?(ex: if you need to change the url through route parameters and with prev/next buttons).

Ans: I can create page change Subject and I can emit when route parameters change or next/prev button change.

Q33) What is the difference between scan() vs reduce() ?

Ans:

Scan: apply a function to each item emitted by an Observable, sequentially, and emit each successive value

Reduce: apply a function to each item emitted by an Observable, sequentially, and emit the final value

Q34) What is a pure pipe?

Ans: A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe

Q35) What is an async pipe?

Ans:

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted.

When a new value is emitted, the async pipe marks the component to be checked for changes.

When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

Q36) What kind of data can be used with an async pipe?

Ans: Promise, Observable

Q37) How does async pipe prevent memory leeks?

Ans: When a component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

Q38) What is the difference between pure and impure pipes

Ans: A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe. An impure pipe is called for every change detection cycle no matter whether the value or parameters changes.

Q39) What is the minimum definition of a component?

Ans: A component is class that is used to building block in Angular

Q40) What is the difference between a component and a directive?

Ans: Components are their own HTML and Style(View), Directive is just behavior to extend the elements of the component.

Q41) How do components communicate with each other

Ans:

Three-way to communicate components:

  • Passing the of one component to another component
  • passing value through parent component
  • passing through service

Q42) How do you create two-way data binding in Angular?

Ans:

combines the input and output binding into a single notation using the ngModel directive.

Eg: <input [(ngModel)]=”name” >  {{name}}

Q43) How would you create a component to display error messages throughout your application?

Ans: Set the error message equal to an angular variable and then check if that variable exists to decide whether to display value or Error.

Q44) What does a lean component mean to you?

Ans: The lean component we use for only display the data only.

Q45) When do you use template-driven vs model-driven forms? Why

Ans: Template driven are simple forms which do not involve complicated logic code. Model-driven are more advanced and it customization the functionality and flexibility.

Q46) How do you submit a form?

Ans: using ngSubmit()

Q47) What’s the difference between NgForm, FormGroup, and FormControl? How do they work together?

Ans: ngForm:- When we import the Form module, NgForm automatically attaches to the tags, it always works from behind.

Q48) What’s the advantage of using FormBuilder?

Ans: FormBuilder reduces creating instances of a FormControl, FormGroup, or FormArray. It reduces the amount of boilerplate needed to build complex forms.

Q49) What is the difference between RouterModule.forRoot() vs RouterModule.forChild()? Why is it important?

Ans:

RouterModule.forRoot is a static method and it helps to configure the modules.

RouterModule.forChild() is a static method used to configure the routes of lazy-loaded modules.

Q50) Can you explain the difference between ActivatedRoute and RouterState?

Ans: ActivatedRoute can be reused, and it will give all property and objects.

RouterState doesn’t create a new activated route.

Q51) How do you debug router?

Ans:

Can be activated by passing a flag when it’s added to the app routes.

Example:

@NgModule({

imports: [ RouterModule.forRoot(routes, { enableTracing: true }) ],

exports: [ RouterModule ]

})

export class AppRoutingModule {}

Q52) Why do we need route guards?

Ans: route guards are interfaces which can tell the router to allow or not the navigation to a requested route.

Q53) What is a RouterOutlet?

Ans: RouterOutlet use to bind the components when navigation is called.

Q54) How do you mock a service to inject in a unit test?

Ans: by using $provide.

Q55) How do you mock a module in a unit test?

Ans: Mock functions are also known as “spies” because they let you spy on the behavior of a function that is called indirectly by some other code.

Q56) What is the difference between an Interface and a Class?

Ans:

An interface is a contract.

Abstract classes look a lot like interfaces, but they have something more.

Q57) First line below gives a compile error, the second line doesn’t. Why?

Ans: it will give like one by one line, after excuting the first line then it will response getting wrong

Q58) Tell the building blocks of the angle.

Ans: The angular application is made using the following:

  • Blocks
  • Component
  • Template
  • Orders
  • Data Nemo
  • Services
  • Pro injection
  • Lane

Q59) What is transparency in angle?

Ans: Transparency is the process of converting JavaScript types (using Tracer, a JS compiler). While the character types are used to write code in encryption applications, the code is replaced in JavaScript.

Q60) Distinction between angles and orders in angle

Ans: Elements are broken into small parts; At the same time, the DOM element adds guides.

Q61) Angle life cycle hooks

Ans:

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

Q62) What is the input and @release application?

Ans: When it comes to contacting the angular components in parent-child relationships; We use the @intertainment in the baby sitcom for the child as part of the child and the child being used as a part of the child as part of the child that is part of the child.

Q63) What does a router do?

Ans: We will use the router when we want the path to an element. Syntax: this.router.navigate ([‘/ component_name’]);

Q64) What command is used to create a service and service in angle?

Ans: It helps us to repeat the code. By creating a service, you can use the same code from different components. The command here is to create a service in the angle, the gg service user (created a user service when using this command).

Q65) What is the reliability injection in angle?

Ans: When a component is dependent on another component, the function is turned on / off when the functionality is turned on.

Q66) What is the angle rounding?

Ans: Going to other pages using links can lead to a user.

Q67) How will events be handled at angles?

Ans: Frontend / web screen is called an event for any user of a user (clicking the button, mouse click, mouse hover, mouse move, etc).

Q68) What is a Router Outlet?

Ans: Router Outlet is a replacement for templates that organize elements. In other words, represent or provide elements in a template in a given location.

Q69) Explain the String Interpolation

Ans: When used with the HTML tag, the parentheses {{}} package represent data from a component. For example, an HTML page containing <h1> {{variableName}} </ h1>, where ‘variableName’ actually refers to its value in the templatecript (component) chart; That is, HTML. This whole idea is called string interpolation.

Q70) How is data binding done in many ways?

Ans: Data linking between HTML (template) and typescript (component) Data can be done in 3 ways:

  • property bonding
  • event binding
  • two way data binding.

Q71) What do you say in angular terms?

Ans: There are a number of elements in a web page in the angle. There is a module based on a component, in which the information is displayed in the HTML, and some logs typically written in the typewriter.

Q72) ngModel and how do we represent it?

Ans: ngModel is a command used in the text area. These two way data binding. ngModel [[]]

Q73) What makes an appointment in chain 4?

Ans: This is an algorithm. Whenever a subscription method is called, an independent execution will be executed.

Q74) Distinguishing between fascination and promises.

Ans: Observables lazy, which means nothing happens until a subscription is made. Promises are interesting; As soon as it makes a promise, the execution takes place. Noticeable is a stream of zero or overwhelming events and every event is invited. At the same time, the truth conducts a concert.

Q75) What is Pipes?

Ans: This feature is used to change the output of the template; The string is shifted in size and is shown in the template. This can change the date format accordingly.

Q76) Difference between ng-class and ng-style.

Ans: In the Ng-class, the CSS class loading is possible; Whereas in ng-style we can set the CSS style.

Q77) How to update or update angle cli version?

Ans: To upgrade the application installed on your application, you will need to enable the following commands:

  • npm un install -g angular-cli
  • npm error cache clean or npm cache (npm> 5 if)
  • npm install -g @ angular / cli @ upgrade version

Q78) Some inbound pipes are available in angle

Ans: Below is a list of some bytes in the angle

  • DatePipe
  • CurrencyPipe
  • AsyncPipe
  • DecimalPipe
  • TitleCasePipe
  • JsonPipe
  • SlicePipe
  • PercentPipe
  • UpperCasePipe
  • LowerCasePipe

Q79) What are the rxjs in angle?

Ans: Reactive programming is a coherent programming priority related to the spread of data unity and transformation. RxJS (Reactive Extensions for JavaScript) makes it easy to simulate sync or request-based code.

Q80) What is httpclient in angle

Ans: HttpClient in @ angle / common / http is a simple client HTTP API for angle applications in the XMLHttpRequest interface released by browsers. … it depends on the memory-web-app in the voicemail, which is to change the HttpBackend for the HttpClient module.

Q81) What are the 5 decorators on the angle?

Ans: Designers are a new feature of TypeScript and are used throughout the angle code, but they have nothing to be afraid of. Designing with decorative designers and customizing our classes in the design class. Meta-Data, Properties or Functions are the actions that are used to add the material they are attached to.

Q82) What is the element in AngularJS?

Ans: AngularJS Guidelines. HTML attributes have been extended with prefix AngularJS commands. Ng-utility will launch an AngularJS application. The value of HTML-controls (input, select, text form) binds the value of the ng-model ordering data.

Q83) What is the use of decorative designers?

Ans: Decorators. Designers are proposed for a future version of JavaScript, but the angle group actually uses them and are included in the TitzScript package. Ornamental designers act as a highlighted @ symbol, and immediately a class, parameter, pattern or property.

Q84) What is the pro injection in angle?

Ans: Pro injection (DI) is a software design method that depends on how the components depend. AngularJS Engineer is responsible for creating sub-component components, solving their functions, providing them with other components as requested.

Q85)What is AngularJS routing?

Ans: We can create Single Page Application (SPA) with AngularJS. This is a web app, which is a single HTML page loaded and dynamic updates of the page that the user has in contact with the user on the web page. AngularJS supports SPA Routing module ngRoute. This routing module is based on the URL.

Q86) What is bootstrapping in angle?

Ans: There is nothing but the bootstrapping angle app in AngularJS. AngularJS has two ways of bootstrapping. … When you add ng-utility instruction on the root of your application, the <html> tag or <body> tag will be the angle to boot your app automatically.

Q87) What angle is the bond?

Ans: AngularJS is an automated synchronization of data between data-bound model and display elements in applications. I consider the modeling process for AngularJS data-binding as a single-source-theory in your application. There is always a definite plan for this scenario.

Q88) Does AngularJS Provide Reusable Components?

Ans: Developers help developers develop reusable components that can be used in full use and provide their own custom components. Can be used as an order, attribute, class and as a comment. AngularJS comes with many basic built-in orders.

Q89) What are angled templates?

Ans: In AngularJS, templates are written with HTML, which contains AngularJS-based elements and attributes. AngularJS template combines the information from the model and the controller to provide dynamic display that will view a browser.

Q90) What is a structure order in angle 2?

Ans: Structured commands are used to handle the DOM in the angle. The configuration mechanisms are responsible for the HTML system. By adding, removing or manipulating the LMN in the angle, they form or redesign the DOM structure. This configuration command is used for a host element with the help of other commands. The Command Element and its commands are then ordered to commands. Structural Guidelines can easily be identified. This is a component or an element instant delay. It can be applied cosmetically or manually manages the time of exports of components. Structural Guidelines are built for a template. Two common configuration commands are “ngIf” and “ngFor”. The procedure in the configuration process will change.

Q91) What is the AOT package?

Ans: AOT time is ahead. It compiles the vertical blocks and templates when creating JavaScript and HTML.

Q92) What are the angles @ the directions?

Ans: RouteParams are used to use a given URL based on path URLs, and they become custom parameters for that route.

Q93) Angle hidden property description?

Ans:

The hidden property in the angle is a special case.

The property is very powerful and is used to bind any property of the elements.

It is considered a close relative of ngshow and nghide.

This sets the display property “display: none”.

Q94) Explain the host decorator in angular 2.

Ans: Hoster designers in angular 2 connect the properties of elements with UI element values. @HostBinding () Title = ‘Our Title’ (whatever the title) is attributed to a component class definition with @HostBinding.

Q95) Which module needs 2 volumes for each use?

Ans: AppModule is required for each angle.

Q96) Angle samples and ES models are the same?

Ans: No, both are different.

Q97) What is Npm?

Ans: NPM, or Node Package Manager: A command line utility to communicate with the open source schemes is a package manager for JavaScript. Using Npm we can install libraries, packages, and applications with their dependencies.

Q98) What is Xmb?

Ans: XMB is essentially important value pairs without any deeper structure. With descriptions and examples, there is a mechanism for named boxes. 1: 1 for messages in any other language.

Q99) What are the Xmb boxes?

Ans: An example of the boxes is the tag () and a text node. The text node is used as an original value from the placeholder, for example a fake value.

Q100) What’s new in angle 7?

Ans: Main release and full platform expansion-

Core structure,

Angle material,

CLI

Q101) Explain the Passover

Ans: Base is a test tool like Mass, Maven and Grade, an open source development. Bajal uses language that is readable and high build. It handles the program in many languages and creates a large number of sites. In addition, it supports many users and larger watches in many repositories.

Q102) How to Create a Class in the Angle Using Glee?

Ans: Create a class using the code below:

Creating class [options]

ng class [options]

Whose name refers to a class name.

Options Boolean or a file type scheme name, spec value.

Q103) How do you create a decorator in the angle?

Ans: There are two ways to record designers in angles.

These are:

  • $ provide.decorator
  • module.decorator

Q104) What is the difference between the structure and teaching guidelines in the angle?

Ans:

Structural Instructions:

These are used to modify the DOM system by removing and adding DOM components. It is best to change the structure of vision. Examples of configuration guidelines are NgFor and Ngif.

Teaching Orders:

They are used as components of components. For example, the command configured in the NgStyle command in the Technology Syntax Guide is a command line.

Q105) What Are Media Metadata Properties?

Ans:

NgModule Decorator AppModule is an NgModule class identifier.

NgModule takes a metadata object, and it tells you how to compile and start the application.

Q106) What kind of relief is there?

Ans:

Four Types of NgModules

  • Features module
  • Replacement module
  • Service block
  • Widget block
  • Shared volume

Q107) Uses of Polyfills.ts ?

Ans: Easy compability with all browser

Q108) Where we use ng new and why?

Ans: Default creates the folder and files in the project

Q109) Uses of Typescript 3.1?

Ans: Trypescript is the conversion of the javascript. Superscript of java. Angular 7 support the typescript 3.1. browser knows only the javascipt. So typescript changed into javascript while running in the browser.

Q110) Scss abbversation and uses?

Ans:

  • Sassy CSS
  • superset of CSS3’s syntax.
  • Sass to make working with CSS easier.

Q111) What is reflect-metadata?

Ans: It will allow you to store data about an object without creating an attribute on that object.

Q112) What is the latest version of angular?

Ans: Angular 8

Q113) Http client:

Ans: HTTP Client API was introduced to deprecate the HTTP library.

Q114) New feature of cdk:

Ans: Virtual scrolling and drag and drop

Q115) Virtual scrolling used for?

Ans: User can scroll list of page faster than before

Q116) Why drag and drop functionality make default in angular 7?

Ans: Because , now a days drag and drop functionality is using commonly for all page. So angular 7 gives includes the feature default.

Q117) Why we migrating to angular 6 to angular 7

Ans: Additional feature like virtual scrolling and drag and drop functionality is included in the angular 7.

Q118) Syntax for migration?

Ans: Ng update @angular/cli @angular/core.

Q119) How to update the dragdrop module in cmd

Ans: Npm install @angular/cdk@latest

Q120) Why we are using unlink?

Ans: Unlink is used to remove the link between the two functionality in angular.

Q121) How to import the drag and drop module?

Ans: Import {DragDropModule} from ‘@angular/cdk/drag-drop’

Q122) How to used the drag and drop functionality in html?

Ans: cdkDropListDropped)=”onDrop($event)”

Q123) why we include boostrap in angular?

Ans: Because angular support all the responsive format

Q124) default create file in app component

Ans: html,ts,.css,spec.ts,module.ts,routing.ts

Q125) uses of spec.ts?

Ans: ts is used for test cases.

Q126) How many files create, while using the generating commands?

Ans: files in default

Q127) why route is introduced in angular?

Ans: Because almost the page is connected to another page. So when click a functionality in the screen. It is redirected to another page.

Q128) When constructor is invoked in angular?

Ans: When ts file invoked in the angular , constructor invoked on that time.

Q129) what is observable?

Ans: observables as an interface to handle a variety of common asynchronous operations.

Q130) what is binding and types?

Ans: Binding is the process of getting the data and combine.

Types

  • data binding
  • event binding

Q131) What is pipe and uses?

Ans: Pipe is used for set the different format in user definition. Ex date: we can set dd/mm/yy or dd:mm:yyy.

Q132) What are the types of pipe?

Ans: 8 type of pipe in angular

Q133) why we are using material?

Ans: Material are using because of the design and style in angular application

Q134) Only root module is enough or do you go for specific modules for specific functionalities? And what is the approach?

Ans: Need to use feature modules for different functionalities. It is not good practice to overload root module. The feature modules have to be exported and imported in root module.

Q135) If you want to display data in % format, how do you it?

Ans:

  • Can be done using in-built pipe – percent
  • a = .78;
  • {{ a | percent }}

Q136) List built-in pipes

Ans:

  • Uppercase
  • Lowercase
  • Titlecase
  • Currency
  • Date
  • Percent
  • Slice
  • Decimal
  • Json

Q137) What is the significance of Zone in Angular?

Ans: Zone notifies angular about change detection

Q138) How do you create custom pipe?

Ans: Custom pipe can be created by implementing interface – PipeTransform and defining the transform() method.

Q139) What is shadow DOM?

Ans:

  • It provides encapsulation for DOM trees and styles
  • It hides DOM logic behind other elements and also confines styles only to that component
  • When we integrate, there is a chance that data and style may be applied to entire application. So, shadow DOM encapsulates data and styles for each component so that it doesn’t flow through entire application

Q140) Error handling in angular

Ans:

  • catchError() function contains a link to the error handler function
  • in error handler, we send the error to console

Q141) How do you decide whether a user can be navigated to a particular page or no?

Ans:

  • Can be done using route guards
  • If route guard returns true, navigation continues, else, it stops
  • CanActive is the guard which is used

Q142) What is lazy loading and how do you achieve it?

Ans:

  • Modules are loaded only when requested by the user instead of loading all the modules on load which reduces performance
  • It is like loading module only on demand
  • Speeds up the application initial load time
  • It can be achieved through routing

Q143) If you want to send an optional parameter in a route, how do you achieve it?

Ans:

  • Using query params
  • getAdverts()
{

this.router.navigate(['/adverts'], { queryParams: { advertId: '201' } });

}

Q144) Which lifecycle hook is called before ngOnInit?

Ans: ngOnChanges() is the lifecycle hook which called first of all

Q145) Constructor is called first or ngOnInit?

Ans: Constructor is called first

Q146)What are the new features in Angular 6?

Ans:

Uses RxJS6

Import {Observable} from ‘rxjs’;

Import {map} from ‘rxjs/operators’

  • json instead of angular-cli.json
  • @Injectable({providedIn: ‘root’})

To add service as global

  • Operators are renamed

Do() -> tap()

Catch() -> catchError()

Finally() -> finalize()

Switch() – switchAll()

Throw() – throwError()

Q147) When do you use ngClass?

Ans: When we want to add or remove class dynamically based on some condition

Q148) Can we use more than one structural directive on a single element? If no, what is the approach?

Ans: No, need to use <ng-container> to include one of the structural directive

Q149) How do you create a component without including spec class using angular cli?

Ans:

Need to use this command

ng generate component component-name –spec=false

Q150) How do you create a model using angular cli?

Ans:

  • Using the following command
  • ng generate class class-name –type=model

Q151) Can we have multiple router outlets? If yes, what is the approach?

Ans:

  • Yes, need to use names for router outlet
  • The router outlet name has to be specified in router

Q152) What are the advantages of typescript?

Ans:

  • OOPs concepts like generics, interfaces and types which make easier to catch incorrect data types passed to variables
  • ES 6 features – class keyword, arrow functions
  • It is easier for developers experienced in java, .net

Q153) If you do not give selector to a component, will it work? What are the mandatory properties of components?

Ans:

  • No, selector is mandatory
  • And template/templateUrl is also mandatory

Q154) What is the purpose of using package.json in the angular project?

Ans:

  • identifies npm package dependencies
  • contains command scripts to run the appln and run tests
  • contains dependencies n devDependencies

Q155) What is the difference between Components and Directives?

Ans:

  • Components break the application into smaller parts i.e., they are building blocks of angular application
  • Directives add behavior to the existing DOM element

Q156) Can we achieve constructor over-loading in typescript?

Ans: No, constructor overloading cannot be achieved in TypeScript

Q157) What is transpiling? Why is it necessary?

Ans:

  • Converting TypeScript to JavaScript using JS compiler
  • It is required coz browser understands only JavaScript

Q158) If you provide a service in two components’ “providers” section of @Component decorator, how many instances of service will get created?

Ans: One instance because Service is a singleton object

Q159) Which module has to be included to use [(ngModel)]?

Ans: FormsModule has to be included because ngModel is built-in directive in FormsModule

Q160) Which module has to be included to use Reactive forms?

Ans: ReactiveFormsModule has to be imported

Q161) Which module has to be included to use Reactive forms?

Ans: FormsModule has to be imported

Q162) Which module has to be included in Feature modules?

Ans: CommonModule has to be imported

Q163) List different ng commands

Ans:

  • Ng new
  • Ng generate
  • Ng serve
  • Ng test
  • Ng build

Q164) Where do you unsubscribe?

Ans: In ngOnDestroy lifecycle hook

Q165) Is it possible to unsubscribe using Promises?

Ans: No, Promises cannot be unsubscribed. Observables can be unsubscribed

Q166) Name component-only hooks

Ans:

  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked

Q167) When is ngOnchanges() invoked?

Ans: called when angular sets or resets data-bound input

Q168) What is angular CLI?

Ans: Tool used to initialize, develop and maintain angular applications

Q169) What are the new features included in Angular 7?

Ans:

  • Virtual Scrolling
  • Drag n drop
  • New life-cycle hook ngDoBootsrap is added

Q170) Which method of RouterModule has to be used for providing all routes in AppModule

Ans: forRoot() has to be used to add all routes in root module

Q171) How do you build an angular project?

Ans: Using ‘ng build’ command

Q172) Why do you need to write a separate service and why not make an API call in component itself?

Ans: It is a good practice to separate presentation of data from data access by encapsulating data access in a separate service and using that service in the component

Q173) When you call an http method of Service class in component, you will get error if?

Ans:

  • If it is not subscribed
  • Once we call http request, it has to be subscribed

Q174) How do you represent two-way data binding?

Ans: Syntax of two-way data binding : [(ngModel)] =”name”

Q175) Where do you define global styles in an angular application?

Ans: Global styles can be defined in styles.css file

Q176) What are the different datatypes in TypeScript?

Ans:

  • Boolean
  • Number
  • String
  • Any
  • Void

Q177) Which data-type is assigned when a variable is declared but no data-type is mentioned?

Ans: By default ‘any’ data-type is assigned

Q178) The structural directive *ngIf, hides or removes an element? What is its significance?

Ans:

  • When the condition is false,*ngIf removes element from DOM, detachs component from change detection and destroys it
  • If the element is just hidden instead of removing, performance decreases and it will be a memory burden as well

Q179) How do you update your angular project to latest version?

Ans: Using ‘ng update’ command

Q180) How do you bypass corporate proxy to run ‘npm install’ commands?

Ans:

  • Proxy settings have to be configured using the command:
  • npm config set https-proxy
  • npm config set proxy

Q181) How do you get angular material in your project?

Ans:

  • Angular material and Angular CDK have to be installed using the command:
  • npm install –save @angular/material @angular/cdk

Q182) What is node_modules?

Ans:

  • js creates node_modules folder
  • It contains all the modules listed in package.json

Q183) If you donot have a backend ready, how do you make an API call/ http request?

Ans: We have to mock the backend service i.e., have to create the mock json data and have to specify that path in API url

Q184) Which directive need to use for two way data binding in Angular Js?

Ans: Ng-Model

Q185) Which directive need to use for one way data binding in Angular Js?

Ans: Ng Bind

Q186) What is the difference between Ng-Show/Hide and Ng-If?

Ans: Ng-Show/Hide: It will always have a DOM Element but show /hide based on the conditions. Ng-IF : It will insert the DOM Element only if the condition gets satisfied.

Q187) What Angular.copy will do ?

Ans: It will create deep copy of the variable. It doesn’t point to the same memory reference of the original variable.

Q188) What we use to validate the form input?

Ans:cNg-Validate is used to validate text inputs like phone numbers , email , barcodes.

Q189) What is the migration change for Angular 1.4 -Angular 1.5 ?

Ans: Changed .directive to .component.

Q190) What is the exception handler used in Angular js?

Ans: Angular has build in Exception handler service called “$exception handler” which can easily be overwritten.

Q191) What are the build in directives available in Angular Js?

Ans: Ng-Bind , Ng-model, Ng-Class , Ng-If , Ng-pattern, Ng-Repeat.

Q192) How will you declare $watch?

Ans:
By declaring it in template via expression.
By creating your own watches.
var watch = $scope.$watch(‘watchvariable’ ,function(){
alert(“watch Created”);
});

Q193)  what is the use of $apply?

Ans: $apply is used to trigger digest cycle explicitly and see the changes propagate normally.

Q194) what is @inject?

Ans: @inject is a manual mechanism of injecting a paramter.

Eg : import(inject) from ‘@angular/core’;
constructor(@inject(Angular) private Angular){};

Here we injected Angular as paramter.

Q195) what is rootscope?

Ans: $rootScope is the parent scope. This is available in the entire application.

Q196) How can we create AngularJS module?

Ans: angular.module()

Q197) Does Scope contains the model data in AngularJS.

Ans: True

Q198) what is ng-controller?

Ans: ng-controller directive creates a controller, gives it a scope and attaches a controller class to the view.

Q199) what is ng-app?

Ans: The ng-app directive is for bootstrapping your application. The element with ng-app is the root element. It wraps the other directives of your application.

Q200)  where we use ng-repeat directive?

Ans: To iterates over a collection of items and generate HTML from it.

Q201) which directive that can be used to include HTML fragments from other files into the view of HTML template?

Ans: ng-include.

Q202) what is the use of ng-change ?

Ans: Evaluates the given expression when the user changes the input to the new value.

Q203) what is ng-view in Angular JS?

Ans: App can have only one ng-view and its the placeholder for all routing.

Q204) What are the types to create custom directive?

Ans:

Element directive
Attribute directive
CSS directive

Q205) Can we have nested controllers in AngularJS?

Ans: Yes, we can have nested controller.

Q206) Do AngularJS provide reusable components?

Ans: Yes.

Q207) what is the use of $timeout service?

Ans: It can be used to delay the firing of a command.

Q208) what is $provider?

Ans: It is responsible for telling Angular how to create new injectable things called services.

Q209) what are specialized objects in Angular Js?

Ans: Specialized objects are the framework objects like controllers, directives, and filters.

Q210) Which two phases angular application run?

Ans: Angular application runs in two phases – config phase and run phase.

Q211) what is config phase ?

Ans: The config phase is where one can setup the provider, directives, controllers, filters .

Name of the provider in the config phase would be name + Provider. If you create a provider as date , then it should be like dateprovider.

Q212) what is run phase?

Ans:
The run phase is where Angular compiles your DOM and starts up your app. This is the phase where any service can be instantiated.

Q213) What is promise?

Ans:
Promise are eventual function that tell what need to do when an operation succeeds or fails. Promise are created with $q service.

Q214) what is defer in promise?

Ans: Defer is a object that exposes promises.It has three methods.

1.Reject
2.Resolve
3.Notify

Q215) What we use to transmit data between parent controller to child controller?

Ans: $broadcast

Q216) what is $emit?

Ans:$emit is used to transmit data between child to parent controller.

Q217) what is $on?

Ans: $on is used to handle events.

Q218) Why we use Angular?

Ans: It considered to be faster, lighter and easy to use.  thus making the bundles smaller. It used to create Single Page Application.

Q219) What Is Bootstrapping in Angular?

Ans: Bootstrap the app(like a booting process), using the root component from the specified NgModule.

 Q220) Explain NgModule?

Ans: It defines a module that contains components, directives, pipes, and providers. And Root Component(master page).

 Q221) List out the @NgModule Metadata Properties?

Ans: declarations, imports, exports, providers, entryComponents and bootstrap.

 Q222) How to convert TypeScript and HTML into JavaScript?

Ans: We using transpiler to convert Typescript/HTML into JS.

 Q223) Is it possible to have a multiple Module in our application?

Ans: Yes, FeatureModule(sub module) used to create and handle a multiple module.

 Q224) Explain about use of EventEmitter in Angular?

Ans: It allows one or more functions to be attached to events emitted by the object. When the EventEmitter object emits(trigger) an event, all of the functions attached to that specific event are called synchronously.

 Q225) What are Decorators?

Ans: It’s a design pattern that is used to separate modification of a class without modifying the original source code. In Angular, decorators intimate angular to how the class are perform (like a service, component, directive or pipes).

Q226) How to create a new project in angular using CLI Command?

Ans: ng new <Project-name>

Q227) Difference between Pure and Impure Pipe?

Ans:

Pure Pipe:

  • It will execute when we change same param value or pipe argument.

Impure Pipe:

  • It will execute for each and every mouse and keyboard events.

Q228) Explain about Directive and Directive Types?

Ans:

It used to make a DOM level changes dynamically. Types,

  • Component Directive,
  • Attribute Directive,
  • Structural Directive.

Q229) What Is Angular Services?

Ans:

Services is a Injectable class. It used to create sharable functions, and object values and HTTP calls.

Q230) List out Lifecycle Hooks in Angular?

Ans:

Angular Lifecycle hooks is a change detection process in component and directive.

  • ngOnChange
  • ngOnInit
  • ngDoCheck
  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked
  • ngOnDestroy

Q231)Explain about Data Binding in angular?

Ans:

It’s used to communicate between Template into component dynamically. It worked based on Change event. We have two types of Data Bindings are,

  • One-way data binding
  • Two-way data binding

Q232)How to implement Form Validation in angular?

Ans:

In angular we have two types of Form Creation/Validation process

  • Template Driven Forms
  • Reactive Forms

Q233)Define Dynamic Components?

Ans: It allow to load Component dynamically without user interrupt. Like a news feed or Ads.

 Q234) What Is Router outlet?

Ans: Router outlet create some space to bind navigated page in our application.

Tag: <router-outlet><router-outlet>

Q235)Is it possible to have a multiple router-outlet in the same template?

Ans: Yes, We can differentiate with name attribute.

Like  <router-outlet name=”privateOne”><router-outlet>

Q236)What happened when I should not add classes to module’s declarations in Angular?

Ans: It will throw runtime error, like that particular class didn’t defined in NgModule Schema.

Q237)How to implement Authentication and Authorization process in Angular?

Ans: In angular, we can implement Authentication and Authorization process using Routing.

Authentication/Authorization Router properties are:

canActive, canLoad, canDeActivate, canActivateChild.

Q238)What Is an Entry Component? When we use components to entry Components?

Ans: Whenever we need to load component based on user perspective like popup or dynamically means we need entry component.

Q239)What is AOT (Ahead-Of-Time) Compilation?

Ans: The Angular compiler takes in the Typescript 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. Each Angular app gets compiled internally.

Q240)Define the ng-content Directive?

Ans: It is an Angular core directive, used to conventional HTML elements have some content between the tags.

Q241)Define Attribute directives

Ans: It’s a one of directive that can listen to and modify the behavior of other HTML elements, attributes, properties, and components.

Q242) In the below code snippet, what is the correct statement to be placed at line number 2 to create a component without any errors(both compile-time and run-time)?
import { Component } from ‘@angular/core’; export class AppComponent { }

Ans: @Component({ selector:my-app, templateUrl:’./app.component.html’})

Q243) Which of the following statement is used to bootstrap a root module called AppModule?

Ans: platformBrowserDynamic().bootstrapModule( AppModule)

Q244) Which of the following property of NgModule is used to declare components, directives and Pipe classes?

Ans: Declarations

Q245) In the below code snippet, what is the correct statement to be placed at line number 6 to display the numbers array as a list?

import { Component } from ‘@angular/core’; @Component({    selector: ‘my-app’,    template: `       <ul>    </ul>  `    })export class AppComponent {    numbers: any[] = [1,2,3];   }

Ans: <li *ngFor = &quot;let num of numbers*>{{ num }} </li>;

Q246) Sam has created a highlight directive as shown below. What color will be applied to the page if the user enters yellow in the input field?

//highlight.directive.ts

import {Directive, ElementRef,Input} from '@angular/core';

@Directive({

selector:['highlight']

})

export class HighlightDirective{

constructor(el:ElementRef){

el.nativeElement.style.backgroundColor='blue';

}

}

//app.component.ts

template:`

              <label>Provide color to be applied on the page</label>

          <input type='text' [(ngModel)]='colorName'>

            <div highlight>Hello </div>

Ans: yellow color will not be applied as there is no binding of model colorName and highlight

 Q247) What is the correct statement to be placed at line number 3 to disable the button?

@Component({    selector: ‘my-app’,            template: ‘<button ….>Click Here</button>’})

export class AppComponent {  exists: Boolean = true; }

Ans: [disabled]= “exists”

 Q248) What type of data binding is used in LoginComponent to bind username and password textboxes with username and password properties of Login class?

Ans: Two Way Data Binding

Q249) In a Library Management application, there is a requirement that all the books should have their price shown in US-dollar symbol where ‘books’ is an array containing ‘title’,’price’,’dateofpurchase’ as attributes. Which of the following is the correct statement to display the price of each book?

Ans: <p *ngFor = *let p of books*>{{ p.price | currency:”USD”:true }} </p>;

Q250) Find out the erroneous line in the below code snippet:

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

export class LengthPipe implements PipeTransform {

length(value: string): string{

return "Length ="+value.length;

}

}

Ans: Line number 4

Q251) Sam has created a custom pipe called ‘MyPipe’ and he wants to use it within a module. In which of the following properties of module metadata, he should declare ‘Mypipe’?

Ans: Declarations

Q252) To which of the following properties, currency pipe is applied in angular application?

Ans: price, totalPrice, grandTotal

Q253) Sam created two components and his requirement is to share data between two components, how he can share data between two components?template?

Ans: Data sharing between two components is not possible in Angular

Q254) What is the main reason we should use ngOnInit hook?

Ans: To perform complex initializations shortly after construction

Q255) Sam has created a component and a stylesheet with name styles.css. He wants to bind his component with styles.css. Which of the following property of @Component decorator he should use to do the same?

Ans: styleUrls

 Q256) Sam wants to create a model driven form for which he should use one of the pre-defined class in the root module. Which class is used for the same?

Ans: ReactiveFormsModule

 Q257) What is the correct statement to bind required and maxlength validators to name field in a reactive form?

Ans: name: [null, [Validators.required, Validators.maxlength(10)]]

Q258) Sam is creating a form in Angular, in which he has a requirement that, when end user goes to any input field he wants to display a popup irrespective of user has typed anything or not, how he can achieve so?

Ans: He can use touched directive.

Q259) Sam is working on a large scale application where he has to create huge forms with lot of validation functionality in it. Which of the following is the best choice for him?

Ans: Model Driven Forms

Q260) custom validator called ‘LengthValidator’ to check the length of a field. Find out the correct statement to configure LengthValidator class in a root module?

Ans: declarations: [LengthValidator]

Q261) Find the correct statement to be placed at line number 1 to create a custom validator class called EmailValidator to be used in a template driven form?

email.validator.ts

….

export class EmailValidator implements Validator {

 validate (control: FormControl)
{
 ….

}

Ans: @Directive({selector:’emailValidator’})

 Q262) When the css classes ng-valid and ng-invalid written in styles.css file will be applied to LoginComponent textboxes?

Ans: when validators applied to the text boxes fails

 Q263) Select the appropriate option to import the EmpService in the module class, so that it would be available to an entire application

Ans: providers: [EmpService]

 Q264) Find the correct statement to be placed at Line number 1 to create a custom service?

Ans: @Injectable()

Q265) Who Developed Angular developed and maintained by?

Ans: Google

Q266) How Angular JS is different than Angular is completely newly written framework compared to Angular JS?

Ans: Without any knowledge of Angular JS, You can learn latest version of Angular.

Q267) Angular Versions History Latest version of angular is?

Ans: Angular 7 before this Angular 2/4/5/6.

Q268) I know Angular 2, How can I update to latest Versions?

Ans: Angular 2,4,5,6,7 Architecture will be same except optimization and few syntax changes.

Eample:

  • Ng if statements
  • Component Lifecycle Hooks
  • Animation Module separated from @angular/core etc.

Q269) Features of Angular 4?

Ans:

  • Smaller and Faster: programs will consume less space and run quicker than previous versions
  • Animation Package: Before this package is part of @angular/ core, In version 4 animation having own package.
  • Typescript support 2.1 and 2.2 Added ng/if else and improved syntax of ngif.

Q270) Features of Angular 5?

Ans:

  • Multiple names are supported for components and directives
  • New Httpclient
  • Build optimiser which removed unnecessary code from applications
  • Additional Evevts in router like ActivationStart, ActivationEnd, ActivationEnd, ActivationEnd

router.events

Event = RouteEvent | RouterEvent

.filter(e =&gt; e instanceof RouteEvent)

.subscribe(e =&gt; {

if (e instanceof ActivationStart) {

spinner.start();

} else if (e instanceof ActivationEnd) {

spinner.end()

}

});
  • OpaqueToken has been removed, instead you have to use InjectionToken
  • Number, date and currency pipes update
  • Angular Universal API and DOM
  • Support Progressive Web Applications (PWA)

Q271) Features of Angular 6?

Ans:

  • New cli command: ng add
  • ng-template instead of template
  • New Event &quot;ngModelChanges&quot;

&lt;input

[(ngModel)]=&quot;name&quot; (ngModelChange)=&quot;onChange($event)&quot;&gt;

onChange(value) {

console.log(value)

}

  • Treeshaking: It removes unused code
  • Rxjs imports
  • Before

import { Observable } from &#39;rxjs/Observable&#39;;

//operators

import { map } from &#39;rxjs/add/operator/map&#39;;

After

import { Observable } from &#39;rxjs&#39;;

//operators

import { map } from &#39;rxjs/operators&#39;;

Bazel Compiler Support

safety-worker.js: Used to unregister existing service worker

Q272) Features of Angular ?

Ans:

  • doBootstrap Lifecycle Hook

class AppModule implements DoBootstrap {

ngDoBootstrap(appRef: ApplicationRef) {

appRef.bootstrap(AppComponent);

}

}

  • Drag and Drop
  • Virtual Scrolling
  • Application performance

I. Speed Improvements

II.Size Reduction

III. Increased Flexibility

Q273) What is NgModule?

Ans:

  • @NgModule is a metadata object.

@NgModule({

imports: [ BrowserModule ],

declarations: [ MyComponent ],

bootstrap: [ MyComponent ]

})

  • imports: Modules
  • Declarations: Components, Pipes, Guards
  • Providers: Services

Q274) What is Routing?

Ans: Navigating one page to another page. In angular routing

achieved by using RoutingModule – import {

RouterModule } from &#39;@angular/router&#39;;

Q275) How to redirect to other page based on certain condition?

Ans: this.router.navigate([&#39;/path&#39;])

Q276) What is component?

Ans: Component is a reusable piece of HTML. Suppose application contains navbar,header,content,footer. You can create navbar,header,content,footer as a components and same navbar you can use in other applications also.

Q277) What is Directives?

Ans: Directives are used to manipulate the DOM.

Ex: Add or Remove Item from an DOM, Change the appearance of Elements

Q278) What is Pipes?

Ans: Pipes are used to format the data before presenting to theuser.

Example: ts: currentDate = new Date();

Html: {{ currentDate }}

output: Thu Dec 27 2018 03:51:31 GMT+0530 (India Standard Time)

ts: currentDate = new Date(); Html:

{{ currentDate | date }} output: Dec 27, 2018 // User Readable format

Q279) What is Input and output?

Ans: Input: Sharing data between parent to child component.

output: Sharing data between child to Parent component.

Q280) How to share data between unrelated components?

Ans: Using Services (Behavior Subject) and NGRX Store (Client side database)

Q281) Difference between *ngIf and [hidden]?

Ans: *ngIf: Condition is true then only element inserted into DOM.

[hidden]: Element is available in DOM but based on condition

it will show or hide.

Q282) What are Structural and Attribute directives Structural?

Ans: Add or Remove Items from DOM (*ngIf,*ngFor,*ngSwitch)

Attribute: Changes appearance of element (ngClass,ngStyle)

Q283) ngForTrackBy?

Ans: I have array contains 100 records and iterating through *ngFor. angular instantiates a template once per item from the array if you add or remove one item from array it will instantiates a template once again to solve this problem, will use trackby function.

Q284) what is AOT Compilation AOT means Ahead of compilation?

Ans: Normally all the component and typescript files converting to native html and Javascript files. these process start at runtime. But in AOT, at the time of ng build all component and ts files converting to native html and Javascript files. deploy native code to server and It will run faster.

Q285) Difference between dependencies and devDependencies?

Ans: dependencies: requires at production build

devDependencies: requires only at development process

Q286) What is 2 way data binding update value from model to view and view to model?

Ans: 2 way data binding in angular achieved by using [(ngModel)]

Q287)what is ng-content?

Ans: Custom text or content between component

Ex: &lt;app-home&gt;

&lt;h1&gt; Home &lt;/h1&gt;

&lt;/app-home&gt; In

home.component.ts

&lt;div&gt;

&lt;ng-content&gt;&lt;/ng-content&gt; // Render Home

Other Content

&lt;/div&gt;

Q288) What is if/else in template?

Ans: if/else works in Angular 4 and Above Versions ts

show: boolean = true;

html

&lt;div *ngIf=&quot;show; else noShow&quot;&gt;

Show Data

&lt;/div&gt;

&lt;ng-template #noShow&gt;

No Data

&lt;/ng-template&gt;

Q289) Upgrade Angular 6 app to Angular 7, some times lazzy loading will not work.how to solve that issue?

Ans: Before

loadchildren: &#39;./moudles/featuremodule#FeatureModule&#39;;

After

loadchildren: () =&gt; FeatureModule

Q290) What does “npm install -g” mean?

Ans: To install npm package global level

Q291) What is Angular CLI

Ans: It is command line interface which helps to get basic setup of angular project

npm install -g  @angular/cli
ng new project-name
cd project-name
ng serve

Q292) How to create app using Angular CLI?

Ans: ng new project-name
cd project-name
code . (to open project in Visual studio code editor)
ng serve

Q293) Differentiate between ng serve and ng builld?

Ans: ng serve – Is use to run application in In-memory (inside RAM) taking whole application compling hosted in http://localhost:4200/
ng build – To

Q294) What do folder “src”, “dist” and “e2e” contain?

Ans: Src – (source folder) All source code
dist – (distribution folder) All build js will be saved after running ng build command
e2e – (end to end testing folder) For testing purpose

Q295) what is importance of angular.json file in Angular cli?

Ans: Workspace is a directory which is generated via Angular CLI

Q296) What are components and modules in Angular

Ans: Components – Class file which will interact with UI i.e., html files
Modules – Which is used to group components, directives, pipes and services

Q297) What is use of TemplateURL?

Ans: Which connects components and html page

Q298) Explain modules?

Ans: Which is used to group components, directives, pipes and services

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

Q299) What is use of Bootstrap in Modules?

Ans: Out of many components, Bootstrap helps for starting the execution

Q300) Which file defines the start module of angular project?

Ans: Main.ts files
PlatformBrowserDynamic method from @angular/PlatformBrowserDynamic  library

platformBrowserDynamic().bootstrapModule(MainModule)

Q301) What is Import in module?

Ans: To import angular library to NgModule

import statement on top is used by typescript
import { FormsModule } from '@angular/forms';
For import statement
import { FormsModule } from '@angular/forms';
Import in @NgModule
imports: [
BrowserModule,
FormsModule
]

Q302) What is Provider in module?

Ans: Will include in services created

Q303) What is need of Webpack?

Ans: Webpack is a module bundler, but you can also use it running tasks as well

Q304) How to use *ngFor Loop directive?

Ans: NgFor is a directive that iterates over collection of data

Q305) Explain ^ and ~ for version resolution?

Ans: ^  Latest minor version
~  Latest revision version

6.1.0
6 is major version
1 is for minor version
0 is for revision version

Q306) Can we have Angular UI without a component?

Ans: No

Q307) What is routing Collection?

Ans: Routing collection is nothing but where we specify URL and component which is loaded

Q308) Explaing the importance of [routerLink] in href element?

Ans: To naviage between routes

<a [router-link]=”[‘home’]”>Home</a>

Q309) What is importance of router-outlet element in routing?

Ans: router-outlet is directive which tell router to render the content in view

<router-outlet></router-outlet>

Q310) Explain importance of loadChildren?

Ans: To achieve lazy loading routing

Q311) How is URL structured for loadChildren?

Ans: ../Customer/CustomerApp.CustomerModule#CustomerModule
Customer – folder or path
CustomerApp.CustomerModule – Filename or path
#CustomerModule – After # Class to be loaded

Q312) Explain importance for forRoot and forChild?

Ans: forRoot – For eager loading
forChild – For lazy loading

Q313) What the importance of Dirty Flag, pristine, touched, untouched, valid, invalid?

Ans: Dirty flag – indicates user has changed values
Pristine – opposite of dirty flag
Touched – indicates field is touched by user
Untouched – Opposite of touched
Valid – Checks whether all validation have passed
Invalid – opposite of valid

Q314) What do you understand by AngularJS?

Ans: This is the name given to a javascript framework. Angularjs enables a user to utilize HTML as a default language while creating templates.

Q315) State some of the key features in AngularJS?

Ans: Some of the key features of AngularJS are as follows…scope, model, controller, services, view, directives, data binding, testable and filters.

Q316) What do you understand by scope in AngularJS?

Ans: In AngularJS, Scope is the name given to the model of application. This is what connects the view and the application controller.

Q317) What do you understand by services in AngularJS?

Ans: Services is the name given to singular objects and functions. These are only utilized for carrying out one each specific activity or task. This is due to the fact that they possess a certain amount of business logic

Q318) What do you understand by directives?

Ans: In AngularJS, directives are the aspects that introduce a new element or syntax which contributes to a different behavior. Directives are considered to be the most important and crucial components.

Q319) State some of the advantages of utilizing AngularJS in web development?

Ans: Some of the advantages of utilizing AngularJS in web development are as follows… MVS patterns are supported, animations are supported, both client / server communications are supported, it supports dependency injection, it supports form validations and one can choose to add a customized directive as well.

Q320) What do you understand by data binding in AngularJS?

Ans: When data is automatically synchronized between the view and the model components, that process is known as data binding.

Q321) State the two ways in which data binding occurs in AngularJS.

Ans: The two ways in which data binding occurs in AngularJS are as follows… data mining in classical template systems and data binding in angular templates.

Q322) State the different types of directives that occur?

Ans: The different types of directives that occur are as follows… element directives, CSS class directives, comment directives, attribute directives.

Q323) What do you understand by injector?

Ans: A service locator is known as an injector. It is used to look for and find object instances.

Q324) What do you understand by Dependency Injection (DI)?

Ans: A software design pattern that determines how any code acquires its dependencies is known as a Dependency Injection.

Q325) State one difference between AngularJS and backbone.JS?

Ans: Backbone.JS will do its job individually only. The former is utilized to combine several other functionalities.

Q326) Who was the creator of AngularJS?

Ans: AngularJS was created by Misko Hevery and Adam Abrons.

Q327) Which company is currently developing AngularJS?

Ans: The company that is currently working on AngularJS is Google.

Q328) AngularJS is mainly used for which function?

Ans: It is mainly used for developing SPA (Single Page Applications).

Q329) Give another name for string interpolation?

Ans: It is also known as moustache syntax.

Q330) What are controllers in AngularJS?

Ans: Controllers is the name given to the components which disseminate logic, comprehension and data to HTML UI.

Q331) What is the function of the controllers?

Ans: As indicative by its name, a controller controls how the flow of data must be from the server to the HTML UI

Q332) State the four types of data binding?

Ans: The four types of data binding are as follows string interpolation, property binding, event binding and two-way data binding.

Q333) Why is a filter used in AngularJS?

Ans: As the name suggests, filters are used for formatting or bettering the aesthetic value of any expression before it is displayed to the end user.

Q334) Can customized filters be created?

Ans: Yes, customized filters are created as well.

Q335) Are nested controllers supported by AngularJS?

Ans: Yes, nested controllers are supported by AngularJS.

Q336) State the different types of filters in AngularJS?

Ans: Some of the different types of filters in AngularJS are as follows…currency, dye, limit, lowercase, number, uppercase and orderBy.

Q337) What is the full form of DOM and BOM?

Ans: The full form of DOM is Document Object Model and the full form of BOM is Browser Object Model.

Q338) State some of the tools which are utilized for testing the Angular application?

Ans: Some of the tools which are used are as follows…mocha, sion, karma, angular mocks and browserify.

Q339) State the three methods in which a service can be created in AngularJS?

Ans: The three methods are as follows… factory, service and provider.

Q340) State the full form of REST in Angular?

Ans: The full form of REST is REpresentational State Transfer.

Leave a Reply

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

Looking for Online Training