> > Angular JS MCQs > Basic Angular JS MCQs

Basic Angular JS MCQ

1. What is an alternative way to write this markup to bind the value of the class field userName to the h1 element title property?

Current user is {{ userName }}

title="userName"

title="{{ userName }}"

title="{{ 'userName' }}"

The only way to do it is by using the square brackets.

Answer

Correct Answer: title="{{ userName }}"

Note: This Question is unanswered, help us to find answer for this one

2. How does the emulated view encapsulation mode handle CSS for a component?

It renders the CSS exactly how you wrote it without any changes.

It makes use of shadow DOM markup and CSS.

It creates unique attributes for DOM elements and scopes the CSS selectors you write to those attribute ids.

It renders all of the CSS rules you write as inline CSS on all of the DOM elements you use them on in the template.

Answer

Correct Answer: It creates unique attributes for DOM elements and scopes the CSS selectors you write to those attribute ids.

Note: This Question is unanswered, help us to find answer for this one

3. In reactive forms, what Angular form class type is used on the native DOM element to wire it up?

FormArray

FormControl

FormGroup

All of these answers

Answer

Correct Answer: FormGroup

Note: This Question is unanswered, help us to find answer for this one

4. When a service is provided for root and is also added to the provider's configuration for a lazy-loaded module, what instance of that service does the injector provide to constructors in the lazy-loaded module?

A new instance of that service is created when the module is lazy loaded.

Providing a service of the same type at a lazy-loaded module level is not allowed.

If an instance of the service has not been created at the root level yet. it will create one there and then use it.

A single instance of that service is always instantiated at root and is the only one ever used, including within lazy modules.

Answer

Correct Answer: A new instance of that service is created when the module is lazy loaded.

Note: This Question is unanswered, help us to find answer for this one

5. In order for Angular to process components in an application, where do the component types need to be registered?

Within a script tag in the index.html file

In an NgModule decorator metadata tag named components

No registration is needed simply include the component files in an app directory.

In an NgModule decorator metadata property named declarations

Answer

Correct Answer: In an NgModule decorator metadata property named declarations

Note: This Question is unanswered, help us to find answer for this one

6. What is the purpose of the data property (seen in the example below) in a route configuration? {path: 'customers', component: CustomerListComponent, data: { accountSection: true }}

A key/value mapping for setting @Input values on the routed component instance

A way to include static, read-only data associated with the route that can be retrieved from the ActivatedRoute

A property on the route that can be used to load dynamic data for the route

An object that will get auto-injected into the routed component's constructor.

Answer

Correct Answer: A way to include static, read-only data associated with the route that can be retrieved from the ActivatedRoute

Note: This Question is unanswered, help us to find answer for this one

7. What is the difference, if any, of the resulting code logic based on these two provider configurations? [{ provide: FormattedLogger, useClass: Logger }][{ provide: FormattedLogger, useExisting: Logger }];

They are the same. Both will result in a new instance of Logger that is bound to the FormattedLogger token.

The useClass syntax tells the injector to make a new instance of Logger and bind that instance to the FormattedLogger token. The useExisting syntax refers to an already existing object instance declared as Logger.

Both of them are wrong. A strong type connot be used for useClass or useExisting.

They are the same. Both will result in the FormattedLogger token being an alias for the instance of Logger.

Answer

Correct Answer: The useClass syntax tells the injector to make a new instance of Logger and bind that instance to the FormattedLogger token. The useExisting syntax refers to an already existing object instance declared as Logger.

Note: This Question is unanswered, help us to find answer for this one

8. What is the value type that will be stored in the headerText template reference variable in this markup?

User List

An Angular ElementRef, a wrapper around a native element

The inner text of the

element

A header component class

The native DOM element type of HTMLHeadingElement

Answer

Correct Answer: An Angular ElementRef, a wrapper around a native element

Note: This Question is unanswered, help us to find answer for this one

9. What Angular template syntax can you use on this template-driven form field to access the field value and check for validation within the template markup?

You can make use of a template reference variable and the exportAs feature that the ngModel directive has.

You can use the ngModel directive in combination with the input field name.

You can use a template reference variable for the HTML input element and then check the valid property off of that.

It is not possible to get access to the field value with template-driven forms. You must use reactive forms for that.

Answer

Correct Answer: You can make use of a template reference variable and the exportAs feature that the ngModel directive has.

Note: This Question is unanswered, help us to find answer for this one

10. How would you configure a route definition for a UserDetailComponent that supports the URL path user/23 (where 23 represents the id of the requested user)?

{ path: 'user/:id', component: UserDetailComponent }

{ url: 'user/:id', routedComponent: UserDetailComponent }

{ routedPath: 'user/:id', component: UserDetailComponent }

{ destination: new UserDetailComponent(), route: 'user/:id' }

Answer

Correct Answer: { path: 'user/:id', component: UserDetailComponent }

Note: This Question is unanswered, help us to find answer for this one

11. Pick the best description for this template syntax code: Boss: {{job?.bossName}}

The ? is shorthand for the async pipe. The job value must be an Observable.

It is using the safe navigation operator (?) on the job field. If the job field is undefined, the access to the bossName will be ignored and no error will occur.

There is an error in the template syntax. The ? is not valid here.

It is diplaying the job value if it has one; otherwise it is displaying the bossName.

Answer

Correct Answer: It is using the safe navigation operator (?) on the job field. If the job field is undefined, the access to the bossName will be ignored and no error will occur.

Note: This Question is unanswered, help us to find answer for this one

12. What are Angular lifecycle hooks?

Loggers for tracking the health of an Angular app

Providers that can be used to track the instances of components

Built-in pipes that can be used in templates for DOM events

Reserved named methods for components and directives that Angular will call during set times in its execution, and can be used to tap into those lifecycle moments

Answer

Correct Answer: Reserved named methods for components and directives that Angular will call during set times in its execution, and can be used to tap into those lifecycle moments

Note: This Question is unanswered, help us to find answer for this one

13. You want to see what files would be generated by creating a new contact-card component. Which command would you use?

Ng generate component contact-card --dry-run

Ng generate component contact-card --no-files

Ng generate component component --dry

Ng generate component --exclude

Answer

Correct Answer: Ng generate component contact-card --dry-run

Note: This Question is unanswered, help us to find answer for this one

14. What directive is used to link an tag to routing?

Basic Angular JS MCQ

1. What is an alternative way to write this markup to bind the value of the class field userName to the h1 element title property?

Current user is {{ userName }}

2. How does the emulated view encapsulation mode handle CSS for a component?

3. In reactive forms, what Angular form class type is used on the native DOM element to wire it up?

4. When a service is provided for root and is also added to the provider's configuration for a lazy-loaded module, what instance of that service does the injector provide to constructors in the lazy-loaded module?

5. In order for Angular to process components in an application, where do the component types need to be registered?

6. What is the purpose of the data property (seen in the example below) in a route configuration? {path: 'customers', component: CustomerListComponent, data: { accountSection: true }}

7. What is the difference, if any, of the resulting code logic based on these two provider configurations? [{ provide: FormattedLogger, useClass: Logger }][{ provide: FormattedLogger, useExisting: Logger }];

8. What is the value type that will be stored in the headerText template reference variable in this markup?

User List

element

9. What Angular template syntax can you use on this template-driven form field to access the field value and check for validation within the template markup?

10. How would you configure a route definition for a UserDetailComponent that supports the URL path user/23 (where 23 represents the id of the requested user)?

11. Pick the best description for this template syntax code: Boss: {{job?.bossName}}

12. What are Angular lifecycle hooks?

13. You want to see what files would be generated by creating a new contact-card component. Which command would you use?

14. What directive is used to link an tag to routing?

15. What is the purpose of the valueChanges method on a FormControl?

16. What are the two component decorator metadata properties used to set up CSS styles for a component?

17. What is the RouterModule.forRoot method used for?

18. What is the difference between the paramMap and the queryParamMap on the ActivatedRoute class?

19. What method is used to wire up a FormControl to a native DOM input element in reactive forms?

20. Which line often given code contains the attribute that tells which part of the HTML contains the AngularJS app?

21. In AngularJS, every bookmarkable URL is called a:

22. it is given that pagination is implemented to browse the menu of a shopping website implemented in AngularJS. For the clickevent on the next-page button, how would you implement the change of URL? [Take the URL as www.xxx.com#?page=2]

23. It is given that the command. var app = anguianmoduiefMyMainApp'. ['moduie1'. 'moduie2']. was used to inject certain modules as a dependency to the main module. These ng—app modules were developed for a web page.

24. Which AngularJS directive is used to bind data values of an AngularJS application to HTML input controls?

25. I) ng-app="module"ii) $injectoriii) $compileiv) $rootScopeFrom the options given below. choose the one that describes what occurs during auto-bootstrapping of an angular application.

26. Which directive is used to define the variables to be used in an AngularJS application?

27. The ngChange directive in AngularJS executes at:

28. Which of the services given below parses the Uniform Resource Locator (URL) in the address bar of the browser and makes that URL available to the application?

29. When $http.get returns a particular object. what method does this object invoke when getting the response?

30. in Service Fabric [PowerShell). which of the following commands is used to retrieve me status of each node available in a cluster?

31. Which of the functions given below is used for serializing common angular objects into strings?

32. What is the most ideal and professional approach to store variables in a controller, which you want to later access in another controller?

33. The AngularJS code shown in Figure 1 of the image was supposed to give the output shown in Figure 2 but is giving a different output Which of the following code lines should be modif‌ied to obtain the required output?

34. Which of the following statements is/are lNCORRECT about the angular.extend function?1. You cannot specify more than one src object in this function.2. You can pass an empty object as the target to preserve the original objects.3. This function does not support recursive merge.

36. Which of the following directives is NOT supported by the ngAria module?

37. A bootstrap event of AngularJS is f‌ired in a single page application. In this situation, how many ng-app directives will be processed?

39. Consider the AnguiarJS code given in Flgure1 of the image. Which of the following should replace the “??' symbol in the form tag so as to obtain the output shown in Figure 2

40. How many child scopes can an AngularJS application have?

41. The value of the query parameter P (value: X) in a URL has to be changed to X + 2. Minimum how many times should the search method of the $location service be used to achieve this functionality?

42. var MainControlier = function($scope)ivar person =[f‌irstName : "Sunny‘,lastName : "Kumar”,Src : "localhost/mytest.png"];Analyze the given code snippet Which of the following statements is incorrect about the above code snippet?

43. Analyze the AngularJS code given in Figure 1 of the image. and choose its correct output from the options given in Figure 2.

44. $routeProvider can be conf‌igured by calling which of the following functions?

45. Which of the following statements is/are TRUE about directives in AngularJS?1. Custom HTML tags can be created using directives.2. Directives are functions bound to a particular scope.3. Directives are singleton objects that can be instantiated only once in an application.

46. Which of the following can be used to add/remove HTML elements from the DOM. based on the data in the model?

47. Which of the following are correct about AngularJS?

48. Which of the following statements is/are true about AngularJS?

49. In which of the following does Angular provide the RESTful functionality?

50. Which of the following methods is NOT used by $compileProvider?

51. Consider the AngularJS code given in Figure1 of the image. Which of the following should replace the "??‘ symbol shown in the script tag so as to obtain the output shown in Figure 2?

53. Which of the following options is NOT a built-in f‌ilter component used in AngularJS?

54. <d1> <d2></d2> <d3> <d4><fd4> </d3></d1>d1. d2. d3 and d4 are AngularJS directives. Find the order in which the post-link event of these directives lifecycle occurs.

55. Which of the following can be used to associate controllers with scope objects implicitly?

56. Which part of the MVC architecture holds an application's data and def‌ines the logic that manages that data?

57. The GET method using the HTTP service fails to receive a response from the server. How will the AngularJS application react to this scenario?

59. At which priority level does the nglf directive execute?

60. You are given a nested Directive Structure. Suppose that the parent node. on receiving the data. broadcasts the information to render to its child directives. How will the broadcast be emitted and received within the parent scope?

61. Which of the services indicated below provides primitive DOM manipulation functions to insert, remove as well as move elements within the DOM?

62. Which directive executes at priority level 1000?

63. Which service does the HTML $compile service use for the purpose of data binding?

64. Which directive works exactly like the ngClassOdd and ngClassEven directives except that while it works individually, the last two work together with the ngRepeat directive?

65. Which of the following symbols can be used to add f‌ilters to directives?

67. Which of the following options is the function of the given Service Fabric CLI command?sfcti node list --query "sort_by(items{‘]. &name)[-1].name

68. Consider that you are creating a Service Fabric CLI application. You are unable to view the build definition template. Which of the following options is considered as the major reason behind the given condition?

69. What will be the output of the AngularJS code given below?

70. What will be the output of the given AngularJS code?

71. Which of the following services helps run functions asynchronously?

72. Which of the following functions return chaining when used as setters?

73. State whether the following statement is True or False:The $scope.$watch() and $scope.$digest() functions are automatically called by AngularJS; they cannot be called manually.

74. if the HTML template display causes a f‌lickering effect in an AngularJS application, which directive can be used to avoid that effect?

75. in AngularJS. what is the function of the scope object that is available in the MVC pattern?

76. What will be the output of the given AngularJS code?

77. Which of the following statements about the parts of AngularJS frameworks are correct?1. ng-app def‌ines and links an AngularJS application to HTML.2. ng-model binds the values of AngularJS application data to a cloud model.3. ng-bind binds the AngularJS application data to HTML tags.

78. Which of the following is NOT a property of the angular.version object?

80. In Distributed Architecture Structure, which of the following groups undergoes conf‌iguration by using the scope?1. Global2. Environment-specif‌ic3. Service-specif‌ic4. Instance-specif‌ic

81. is it possible to create nested scopes that do not inherit properties from their parent scopes?

20.
Which line often given code contains the attribute that tells which part of the HTML contains the AngularJS app?

22.
it is given that pagination is implemented to browse the menu of a shopping website implemented in AngularJS. For the click
event on the next-page button, how would you implement the change of URL? [Take the URL as www.xxx.com#?page=2]

23.
It is given that the command. var app = anguianmoduiefMyMainApp'. ['moduie1'. 'moduie2']. was used to inject certain modules as a dependency to the main module. These ng—app modules were developed for a web page.

25.
I) ng-app="module"
ii) $injector
iii) $compile
iv) $rootScope
From the options given below. choose the one that describes what occurs during auto-bootstrapping of an angular application.

33.

The AngularJS code shown in Figure 1 of the image was supposed to give the output shown in Figure 2 but is giving a different output Which of the following code lines should be modif‌ied to obtain the required output?

34.
Which of the following statements is/are lNCORRECT about the angular.extend function?
1. You cannot specify more than one src object in this function.
2. You can pass an empty object as the target to preserve the original objects.
3. This function does not support recursive merge.

39.
Consider the AnguiarJS code given in Flgure1 of the image. Which of the following should replace the “??' symbol in the form tag so as to obtain the output shown in Figure 2

42.
var MainControlier = function($scope)
i
var person =[
f‌irstName : "Sunny‘,
lastName : "Kumar”,
Src : "localhost/mytest.png"
];
Analyze the given code snippet Which of the following statements is incorrect about the above code snippet?

43.
Analyze the AngularJS code given in Figure 1 of the image. and choose its correct output from the options given in Figure 2.

45.
Which of the following statements is/are TRUE about directives in AngularJS?
1. Custom HTML tags can be created using directives.
2. Directives are functions bound to a particular scope.
3. Directives are singleton objects that can be instantiated only once in an application.

51.
Consider the AngularJS code given in Figure1 of the image. Which of the following should replace the "??‘ symbol shown in the script tag so as to obtain the output shown in Figure 2?

54.
<d1>
<d2></d2>
<d3>
<d4><fd4>
</d3>
</d1>
d1. d2. d3 and d4 are AngularJS directives. Find the order in which the post-link event of these directives lifecycle occurs.

56.
Which part of the MVC architecture holds an application's data and def‌ines the logic that manages that data?

60.
You are given a nested Directive Structure. Suppose that the parent node. on receiving the data. broadcasts the information to render to its child directives. How will the broadcast be emitted and received within the parent scope?

67.
Which of the following options is the function of the given Service Fabric CLI command?
sfcti node list --query "sort_by(items{‘]. &name)[-1].name

69.
What will be the output of the AngularJS code given below?

70.
What will be the output of the given AngularJS code?

73.
State whether the following statement is True or False:
The $scope.$watch() and $scope.$digest() functions are automatically called by AngularJS; they cannot be called manually.

76.
What will be the output of the given AngularJS code?

77.
Which of the following statements about the parts of AngularJS frameworks are correct?
1. ng-app def‌ines and links an AngularJS application to HTML.
2. ng-model binds the values of AngularJS application data to a cloud model.
3. ng-bind binds the AngularJS application data to HTML tags.

80.
In Distributed Architecture Structure, which of the following groups undergoes conf‌iguration by using the scope?
1. Global
2. Environment-specif‌ic
3. Service-specif‌ic
4. Instance-specif‌ic