which among the below statement is incorrect with respect to angular routing ?
const appRoutes:Routes =[
{path:'home',component:HomeComponent,canActivate:[LoginGaurd]
{path:'product',component:productComponent,canActivate:[loginGaurd]}}
];
a.path in the above code can also take a regular expression
b.path can be provided with '**'for recruitment like page not found
c.canactivate can return a boolean value or observable of boolean
d.canactivate is mandatory for all the row configurations
ans =d. canActivate is mandatory for all the route configurations
2.which component will be loaded if the user navigates to the URL
HTTP://localhost:4200/book?
const route: route=[
{path:'',component:homecomponent },
{path:'book/:id',component:bookdetailcomponent},
{path:'**',component:viewcomponent},
{path:'book',component:bookcomponent}
];
a.bookdetail component
b.viewcomponent
c.bookcomponent
d.homecomponent
ans = c
3. which of the below function is used to verify whether the current user has
permission to access the request at route?
a.ngroute
b.canactivate
c.canactivatechild
d.routeAccess
ans = b
4. consider the below route is an angular application ;
const route: route=[
{path:'home',component:homecomponent },
{path:'view',component:viewdetailcomponent,canActivate:[Gaurdservice]},
{path:'**',redirectto:'home',pathmatch:'full'},
{path:'update',component:updatecomponent}
];
below is the partial implemented code for the routegaurd gaurdservice;
@injectable()
export class guard service implement canactivate{
constructor (privat router:&&blank_____Line1_________){}
canactivate(){
if(true){
_______line2_______
}else{
_________line3_____
}
}
}
what has to be added line1,2and3 to and line three so that when the condition holds
true in card service view details condition fails us in redirect to homecomponent
ans=
Line 1: import the Router module from '@angular/router' so that it can be injected
in the constructor of the GuardService.
Line 2: return true if the condition is true, which allows the navigation to the
route 'view'.
Line 3: if the condition is false, navigate to the 'home' route using the
router.navigate() method.
5.which are the below property in a template helps in navigating to the particular
route path in angular ?
a.router link
b.router link active
c.router outlet
d.router output
ans = a
6.consider the below given import statement
import{HTTPClient}from'@angular/common/http';
import{HTTPClientModule}from'@angular/common/http';
HR the following is true regarding the same Select any two
a.HTTP client module should be imported and used in import array in app.module.ts
b.HTTP client model should be imported and used in declarations array app.module.ts
c.HTTp client should be imported and used in newly created service
d.HTTP client should be imported and used in the component class where service is
used
ans=a and c
7.which are the following options is true regarding observable Select any two
a.observable is an object used to handle only synchronous data streams
b.observable is an object used to handle only a synchronous data stream
c.observable is an object used to handle both synchronous and synchronous data
streams
d.absorable are more advanced to javascript promises
ans=b and c
8.prediect the log statement of the below code snippet All necessary imports are
done
@injectable()
export class HelloService{
counter = new observable{
data=>{
data.next(1);
data.error('some error ocured');
data.complete();
}
}
timer = this.counter.subscribe(
data=>console.log(data),
error=>console.log(error),
()=>console.log('data completion occured')
)
}
a.some error occured
data completion occured
b.some error occured
c.1
some error occured
data completion occured
d.1
some error occured
ans=b
9.which of the below property of the view encapsulation helps in the component
styles to override based on its sequence of selector
a.none
b.eumulated
c.shadowdom
d.none of the given options
ans=b
10.Which Of the following type ot data binding results in flow of data from
template to class?
O Event binding
O Property Binding
O Interpolation
O Class and Style Binding
11.Cameron wants to display a message on the screen based on the value of the
proper'/
Message should be displayed only when progress property i; true.
Data set in component:
progress true;
message= "Welcome user"
Which of the following code snippets can provide the desired output?
ans =<h1 *ngIf="progress">
{{ message }}
</h1>
12.consider the below code given in app.componentts file of an angular application
/' app.component.ts '/
import ( Component } from '@angular/core•;
@component({
selector:'my-app',
templateUrl :
' . /app. component. html '
})
export Class appcomponent{
fruitList= ["apples" , 'oranges", "peaches" ]
Which of théfollowing code when written in app.component.html. would render
l,apples
2.oranges
3.peaches
a.<ol><li *ngFor="let fruit of fruitlist;let i= index">{{i+1}}.{{fruit}}</li></ol>
b.<ol><li *ngFor="let fruit of fruitlist">{{fruit}}</li></ol>
c.<div *ngFor="let fruit of fruitlist;let i= index">{{i}}.{{fruit}}</div>
d.<div *ngFor="let fruit of fruitlist;let i= index">{{i+1}}.{{fruit}}</div>
select any two options
ans=options b and d
13.Which of the below methods help in programmatic routing in Angular?
O splice('route path')
O pull('route path')
O navigate('route path')
O slice('route path')
14.Which of the below function is used to verify whether the current user has
permission to
requested route?
O canActivateChild
O canActivate
O routeAccess
O ngRoute
15.Which of the below is not an rxjs operator?
O of
O throw
O throwError
O pipe
16.consider the below code given in app component angular
i=0;
colors: string[]
['grey', 'black']
datalnput: any;
myobservable of('red', •green', •blue');
fetchingData() {
this.datalnput = {
next: x =>setTimeout()=>{
this.j=this.i+1;
console.log(this.i)},1000),
complete: ( )=>setTimeout()=>(console.log(this.colors.length-1)},1000)
this. myobservabie. subscribe(this.datalnput);
What will be the Output displayed in console when fetchingData() method is called?
a.1 2 3 1
b. 1 2 3 4
c.1 2 2 1
d.2 1 1 2
ans=a
17.
Which among the below islare right approach for applying a font size of 20px to
aneleme nt in angular>[select
any three]
a.<p [ngStyle]="{fontSize:'20px'}">FirstStyling</p>
b.<p [style.fontSize]="'20px'">second styling</p>
c.<p [style.fontSize]="20px">third styling</p>
d.<p [style.fontSize]="'20px'">first styling</p>
ans= a.b and d
18.Which among the following interpolation's of dOb Will result in the betow output
where d0b-=wed
Jan 13 2021 14:06:25 GMT+0530 (India standard Timep [select anytwo)
output: jan 13, 2021
a.{{dob I date))
b.{{dob I date: 'medium'}}
c.{{d0b I date: 'dd/mm/yyyy'}}
d.{{dob I date: 'mediumdate'}}
ans=a and b
19.
Which is the correct statement to be placed in the template to hide the button
based on the expression?
@component ( (
selector : •my-app' ,
template:' <button....>C1ick me</button>'})
export class Appcomponent{
check: boolean=true;
a. (hidden)=check'
b. [hidden]=check'
c. hidden={check}
d.[hidden]=check
ans=b
20.
What should be the code written at Line 1 such that Fruits button is disabled when
it loads in
browser?
@component ( (
selector: 'my-app' ,
Cine 1
template: ' <button ____Line1____>Fruits</button>'
export class Appcomponent {
disableFruit: BOOIean false;
}
a.disabled = "disableFruit"
b.[diSabledl "!disableFruit"
c.(disabled) ="!disableFruit"
d.[disabled) = "disableFruit"
ans = d
21.
Which Of the following type ot data binding results in flow of data from template
to class?
O Event binding
O Property Binding
O Interpolation
O Class and Style Binding
ans=Property Binding
22.
Which Of the following statements are true about ng.if?
a.ng-if removes the element from the DOM when theconditionis false
b.ng-if adds the element back to DOM if the condition turns true.
c.ng-if hides the element, but keeps element in the DOM and watches
d.All tthe given options are true
ans=d
23.
A list of companies needs to be displayed in the following format:
(1) Walmart
(2) Broadridge
(3) Vista
(4) Apple
Which of the following snippets will give the required output? Assume companies is
an Arraywhicn
any two]
a.<ul>
<li *ngFor="let c of companies;let i=index;"
({{i}}){{C.name}}
<li>
</ul>
b.<ul>
<li *ngFor="let c of companies; index =i;"
({{i}}){{C.name}}
<li>
</ul>
c.<ul>
<li *ngFor="let c of companies;index as i;"
({{i}}){{C.name}}
<li>
</ul>
d.<ul>
<li *ngFor="let c of companies; index =i;"
({{i}}){{C.name}}
<li>
</ul>
ans= a and c
24.
Consider the below code given in respective files an
/ * app.component.ts
export class Appcomponent (
newArr=[
{id: 101, name: "Alice", age: 23),
{id: 102, name : "Alex", age : 28},
{id: 103 , name: "Bruno", age: 24) ,
{id: 104, name: "Leo", age: 25},
]
}
<div *ngFor="let student of newArr">
<div *ngIf="student.age<25">{{student.name}}-{{student.age}}</div>
<div *ngIf="student.age>25">NA</div>
<div>
What will be the output rendered when ti application loads in browser?
O AUce-23 NA Bruno-24 NA
O Alice-23 NA Bruno-24
O Alice-23 NA Bruno-24 Leo-25
O Error
ans=Alice-23 NA Bruno-24 NA Leo-25
25.
Consider the below given code snippet
@pipe({
name: 'ticket'
})
export class Ticketpipe implements pipeTransform {
transform(value: any, .args: any): any {
if(value5) return value
else return value+' not valid'
}
Which of the following is the correct way to use ticket pipe for the input value 5?
a.{{15 | ticket}}
b. {{5 | TicketPipe: ticket
c.5 | TicketPipe:ticket
d.{{5 | TicketPipe}}
ans=c
26.
consider the below code as a custom validator to validate the value customerNam
(note: name should contain only alphabets)
function validateName(naoe: Formcontrol) (
Line-I
let value=______Line1_____
if (value.match( _______Line2_____))return null
else return { error ; true }
a.Line-1: name Line-2: /IA-zl/
b. Line-1: name.value Line-2: /[A-zJ+,'
c. Line-1: name Line-z /A[A.zl+$/
d.Line-1 : name.value Line-2: "[A-zl+$/
ans=d
27.
Which among the below iS/are an invalid pipe format?
O <p>{{dob | time: 'short' }}</p>
O <p>{{dob | date: 'short' }}</p>
O <p>{{dob | date: 'medium' }}</p>
O <p>{{dob | date: 'month' }}</p>
ans=all the appotions re correct
28.
Which of the following is NOT a valid way of using date pipe
today = new Date()
O {{todayl|date:'short'}}
O {{todayl|date:'shortTime'}}
O {{todayldate:'M/d/y)}
d. {{todayldatel'long'}}
ans=d
29.
Which is the prefix that wilt be needed for interpolation/property binding in case
the
pure attribute?
a.attr
b. attribute
c. property
d. bind
ans=a
30.
Which of the below options are not appropriate while creating a custom structural
directives?
O Importing Input decorator , TemplateRef and VjewContanerRefs
O Importing the directive decorator
O Applying the decorator to the directive class
O None Of the other options
ans=None Of the other options
31
Consider the below requirement of Robert: He wants to write a code to Change the
bac
of the text to yellow on hovering over the text. Which of the following is the
correct
needs to write in Line 5 to achieve his requirement ? His code 1006 like this:
selector: • [appHighlightl' })
export class HighlightDirective {
_________Line 5______
}
a.constructor(el: ElementRef){el.nativeElement.style.backgroundColor = 'yellow';}
b.constructor(el: ElementRef){el.nativeElement.style.color= 'yellow';}
c. constructor(el: ElementRef) { el.style.backgroundcolor='yellow';}
d. coristructor(el: ElementRef) ( el.elementstyle.backgroundcolor -='yellow':}
ans=a
32.
Which of the below features of Angular are not supported in Angular any
a.Dependency Injection
b.Typescript Support
c.Mobile Support
d.Directives
ans= a and b
33.
Consider the below route defined in an angular application:
const routes: Routes ={
{path:'profile/ :name' , component : Profilecomponént },
];
Which of the following angular rnodule needs to be used in ProfileComponent to
fetch the ://localhost:4200/profile?,
O RoutingModule
O Router
C) ActivatedRoute
O Navigate
ans=c
34.
By injecting which of the below classes, developer can access the HTTP methods in
O HttpClient
O Http
O RestClient
O ServerClient
ans=HttpClient
35.
Which of the below is not a type of Subject?
O Behaviorsubject
O Replaysubject
O AsyncSubject
O MultiCastSubject
ans=MultiCastSubject
36.
Consider the below code given in respective files of an angular application:
@component (
selector: '' app-child1' ,
template :<h4>child 2 </h4>
styleurls: ('.child.component.css )
@component ( {
selector: 'child 2',
template: '<h4> child 1</h4>' ,
styleurls: ['./login.ccnponent.css']
What Should be the code written in app.cornponent.html to obtain the
followingoutput?
Child 1
Child 2
O < app-child2 /app-child2 > <app-child1></app-child1 >
O < child2 ></child2> < app-child1 >< /app-child1 >
O < child2></ child2 > < child1></child1 >
O < app-child2 /app-child2 > < child1> </child1 >
ans=<app-child1></app-child1>
<app-child2></app-child2>
37.
Rearrange the Steps to be followed when developing a reactive driven form:
A.Run the form app On browser
B.Create formGroup
C.Create template
D.Add elements to formGroup
O CBDA
O ABCD
O ABDC
O ACBD
ans=CBDA
38.
Which among the below life cycle method is the best place 'or unsubscribing the
observable?
O ngOnChanges
O ngOninit
O ngOnDestroy
O ngDOCheck
ans=ngOnDestroy
39.
Which among the below statement's is/are incorrect with respect to nested
components?[Se1ect
two]
a.Data can be sent from parent component to child component with the of @input
b. Data is sent from child component to parent component always as an event
c.Data is sent from parent component to child component always as an event
d.Only objects can be passed from parent component to child component
ans=c and d
40.
Predict the output of below code snippet, where dob • Wed Jan 13 2021 14•06-.25
GMT•05300ndia
Standard Time)
<p>Output: dob date: 'd/M/yy' }}</p>
O "13/1/20"
O "13/1/21"
O "13/1/2021"
O "13/01/21"
ans="13/01/21"
41.
Predict the output of below code snippet.
app. component . ts
import ( component) from. "@angular/core";
c0mponent ( (
selector: "my-app"
template: <div>
<h3>parent component</h3>
<app-hello> [property1]="parentproperty"></app-hello>
</div>
})
export AppComponent {
parentproperty = 'cristiano ronaldo';
}
hello. component. ts
import {component,input} from"@angular/core";
@component ({
selector: "app-hello";
template :'Hell0....{{childproperty |uppercase}}'
})
export class Helloconponent {
childproperty='Lionel Messi';
@Input() set propertyl(data: string){
this . childproperty = data;
a LIONEL NiESSl
b) Cristiano Ronaldo
c.CRISTIANO RONALDO
ans=a
42.Which Of the forms below are robust and more scalable in Angular Applications?
O Template driven forms
b. Reactive Driven Forms
ans=b
43.
Consider the below code given in an angular application:
/• app. component. ts • /
import componerit from '@angular/core';
@component (
selector: 'my-app',
templateurl :
'. / app. coqonent. html '
export c lass AppComponent {
username : string;
}
<input type="text" ______Line1______>
{ {username}}
What should be the code written atLine 1 to two-way bind userName property with
input box?
a. [(ngModeI)] = "userName"
b. (ngModel) = "userName"
c.#userName
d.[ngModel]="userName"
ans=a
44.
From the below code snippet, predict the cause of error any.
App component-html
<table border=1)
< tr>
<td [colspan]="{{2+3}}">Hello</td>
<td>jhon</td>
</tr>
<tr>.
<td>Hello</td>
<td>Michel</td>
</tr>
</table>
a.Error due to border property
b.Error due to binding
c. Colspan property does not exist
d.The code gets executed successfully with an output
ans=b
45.
ans-
Component directive=They are the directive with a template
Structural directive=he DOM layout by adding and removing DOM elements.
Attribute directive= the appearance or behavior of an element.
46.
Consider the below code given in app component of an Angular app: (Assume all the
necessary
imports are done)
/ • app. component. ts • /
export lass AppComponent
values =[54,44,1];
< ! - - app.component.html •-->
< span "let num of values; let i= index" >
<span *ngIf="i<2">{{num}}</span>
</span>
What will be the output displayed when the component loads in browser?
0 54441
0 441
01
0 5444
ans=5444
47.
Identify the correct statements about modules in Angular application (Select ary
three)
a.All submodules should be configured in the root module
b.Root Module must be loaded by default to launch the Angular application
c.Imports property should contain all module classes to be used across application
d.Angular application can be launched even without a root module.
ans=b,cand d
48.
Christopher wants to load HomepageComponent along with AppComponent during the
initial load
the application. Choose the correct Option below to be included in appmodule.t% me.
a.Bootstrap: [AppComponent, Homepagecomponentl
b.Bootstrap: [HomepageComponent]
c.Bootstrap: [AppComponentl
d. entryComponent: [Appcomponent]
ans=a
49.
Which of the following command can be used to run the Angular application and
launch it ina
browser?
O ngs
O ng serve
O ng serve —port 4200
O ng serve —open
ans=ng serve —open
50.
OnChanges Called when the input properties have changed
OnInit Called on initialization
DoCheck Developer’s custom change detection
OnDestroy Called before the component is destroyed
AfterContentInit Called when the component’s content ngContent is initialized
AfterContentChecked Called when the component’s content is updated or checked
for updates
AfterViewInit Called when the component’s projected view has been initialized
AfterViewChecked
51.Choose the appropriate statement regarding anger command line interface Select
any three
1.CLI comes with code generator that helps to generate skeletons or directive
services and component classes
2.CLI tools is generally mud easier for an expert over a beginner
3.CLI comes with a weapon pre configured for hashless pre configuration
4.CLI commands cannot be scripted for complex tasks
1,2,3
2.which are the feature health in increasing a network performance of an angular
application
lazy loading
3.select the advantages of angular framework over angularjs
a.angular has faster initial loads and improved change detection
b.all of the given options
c.angular supports to a binding that angular JS does not
d.angular uses directives for extending HTML syntax but angularjs uses exhaustive
controls for the same
b
4.tom a friend and developer wants to update his angular project to the latest
angular version Suggest him to possible way
ng update @angular/cli
5.which are the following comprises key component of angular application Select any
three
a.modules
b.components
c.services
d.cli
a,b,c
6.choose the appropriate option that are true regarding an angular component
a.components are generally used to create UI widegts
b.components are used to break the application into small pieces of code
c.all the given options
d.components are used to add a behaviour to existing DOM Helmet
a,b,c
7.which type of template format is recommended by angular CLI default
a.external template sheets
b.inline template sheets
b
which of the following display will display COVID-19 when the angular application
loads in browser
a.{{"covid"+"(10+9)"}}
b.{{"covid".toUppercase())+(10+9)}}
c.{{COV +"ID"+(19)}}
d.{{cov.toUppercase()+"ID"+(19)}}
c