Scribd
Upload
2K views

Angular Dump

The document provides code snippets and answers related to Angular concepts like HTTP requests, unit testing, routing, lazy loading, directives, pipes, and lifecycle hooks. Key points include: 1) To catch HTTP errors in Angular, use the .catch() method to log errors to the console. 2) When dynamically accessing route parameters in Angular, inject the ActivatedRoute service and subscribe to its params observable. 3) Modules, components, directives, and pipes declared as public can be used throughout any module that imports the original module.

Uploaded by

Deepak R.Babu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2K views

Angular Dump

The document provides code snippets and answers related to Angular concepts like HTTP requests, unit testing, routing, lazy loading, directives, pipes, and lifecycle hooks. Key points include: 1) To catch HTTP errors in Angular, use the .catch() method to log errors to the console. 2) When dynamically accessing route parameters in Angular, inject the ActivatedRoute service and subscribe to its params observable. 3) Modules, components, directives, and pipes declared as public can be used throughout any module that imports the original module.

Uploaded by

Deepak R.Babu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

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)

You might also like