1) Below is a constructor definition in Angular:
constructor(public name:string, public age?:number);
You have written a class in Angular which contains several HTTP client requests.
Now, if you get an HTTP error, you wish to catch the exception and print it on the
console. Which of the following code snippet performs the same operation?
ANS:
.map((res) => {
return res as Object
})
.catch((e) => console.log('Error', e))
.toPromise();
2)
You are writing a unit test in Jasmine for your Angular class. You access the
Angular element using the following code:
fixture.debugElement.query(By.css('h1'));
Appending an ID to a youtube video URL is considered safe in Angular. Which of the
following code snippet can be used to make Angular trust a video URL?
ANS:
updateVideoUrl(id: string) {
this.dangerousVideoUrl = 'https://www.youtube.com/embed/' + id;
this.videoUrl =
this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousVideoUrl);
}
3) You are working on an Angular 2 project where you wish to inject a window
object into one of the constructors in your code. Which of the following is the
correct way to do this?
ANS:
constructor(@Inject("windowObject") window: Window})
4)
In Angular 2, we need to include <base href="/"> tag. It helps in determining how
to construct the routing information for an application. Assume you are a
developer, but you don't have access to the head section of the application source
page.
Which of the following workarounds is the most appropriate to declare the
application base path?
ANS:
{ provide: APP_BASE_HREF, useValue: '/' }
5) You are building an application that shows a list of contacts stored in the
contact list component, and when you click on the contact, it navigates to contact
details component. In Angular 2, there are different ways to route to other
components and routes.
Which of the following option shows the correct syntax for adding expression to
access dynamic value?
ANS:
<a [routerLink]="['/contacts', contact.id]">
{{contact.name}}
</a>
6) Which of the following is false about lazy loading?
1) We can split our application to feature modules and load them on-demand
2) Decrease startup time
ANS:
None of the mentioned
7) In a scenario of changing the background color of an element dynamically, which
of the following attribute directives can be used?
Note: There can be multiple correct answers to this question.
Options:
Ng-switch
Ng-style
Ng-class
ANS: All
8)In the context of XSS, which of the given HTML elements will be treated as
untrusted by default?
Note: There can be multiple correct answers to this question.
ANS:
<a href="javascript:...">
9) In Angular 2, below is this.http points to the angular HTTP service.
this.http.get(url)
Considering the standard practice, from which section of a component would you use
service to fetch data from the server?
ANS:
ngOnInit lifecycle hook
10) Module A has a public component (X), directive (Y) and pipe(Z).
Module A is imported in module B.
Which among X, Y & Z can be used in module B’s component’s template?
ANS:
X, Y & Z
11) Given that there are 3 modules A, B & C imported into the root module. In a
session, a user navigates through routes only attached to module A. Comment on
which all modules will be loaded in this session.
ANS:
Module A, B, C & root
12)Given 2 route definitions. Which of the following component will be displayed
for the url/messages/1?
[{
path: 'messages',
component: C1
}, {
path: 'messages/:id',
component: C2
}]
For the path /messages/:id, how would you obtain the value of id parameter inside
the component?
ANS:
Import ActivatedRoute service as X.
X.params.subscribe
13) Given the interpolation expression performed on a website to display a set of
products to the customer.
{{ let item of items | filter: text | orderBy: name }}
ANS: Chained pipe
14)
A common way of applying filters is to pipe it along with the data in the
interpolation expression ( {{ data | filter }} ). What is the significance of the
pipe here?
ANS:
Pipe streams the output of the left-hand side as the input to the right-hand side.
15) While fetching a response from the server, services generally adopt the
mechanism of an emitting event. Which of the following emits a single cancellable
event?
ANS:
Observables
16) 1. Add Injectable decorator
2. Create a myservice.service.ts
3. Export the service class
4. Import the injectable members
Sort the above steps in chronological order.
ANS:
2 4 1 3
17) A component implements the OnInit interface. Which of ngOnInit() and the
component constructor will be called first?
ANS: constructor
18)Which of the following metadata properties are not found in @Component
decorator?
ANS:
import
19) Which of the following directives when set to false does not allow further
execution in child HTML elements?
ANS: ngIf
20)
