Quiz
Q1-Q20
This quiz has a time limit, so it opens in the usual player.
Questions in this quiz (20)
1 What is the purpose of the ViewChild decorator in this component class?
- AIt provides access from within the component class to the ElementRef object for the <p> tag that has the bio template reference variable in the component's template view.
- BIt indicates that the <p> tag be rendered as a child of the parent view that uses this component.
- CIt makes the <p> tag in the template support content projection.
- DIt makes the <p> tag visible in the final render. If the #bio was used in the template and the @ViewChild was not used in the class, then Angular would automatically hide the <p> tag that has #bio on it.
2 What method is used to wire up a FormControl to a native DOM input element in reactive forms?
- AAdd the string name given to the FormControl to an attribute named controls on the element to indicate what fields it should include.
- BUse the square bracket binding syntax around the value attribute on the DOM element and set that equal to an instance of the FormControl.
- CUse the formControlName directive and set the value equal to the string name given to the FormControl.
- DUse the string name given to the FormControl as the value for the DOM element id attribute.
3What is the difference between the "paramMap" and the "queryParamMap" on the ActivatedRoute class?
- AThe paramMap is an object literal of the parameters in a route's URL path. The queryParamMap is an Observable of those same parameters.
- BThe paramMap is an Observable that contains the parameter values that are part of a route's URL path. The queryParamMap is a method that takes in an array of keys and is used to find specific parameters in the paramMap.
- CparamMap is the legacy name from Angular 3. The new name is queryParamMap.
- DBoth are Observables containing values from the requested route's URL string. The paramMap contains the parameter values that are in the URL path and the queryParamMap contains the URL query parameters.
4Based on the following usage of the async pipe, and assuming the users class field is an Observable, how many subscriptions to the users Observable are being made?
- ANone. The async pipe does not subscribe automatically.
- BNone. The template syntax is not correct.
- CThree. There is one for each async pipe.
- DOne. The async pipe caches Observables by type internally.
5How can you use the HttpClient to send a POST request to an endpoint from within an addOrder function in this OrderService?
export class OrderService {
constructor(private httpClient: HttpClient) { }
addOrder(order: Order) {
// Missing line
}
}- Athis.httpClient.url(this.orderUrl).post(order);
- Bthis.httpClient.send(this.orderUrl, order);
- Cthis.httpClient.post(this.orderUrl, order);
- Dthis.httpClient.post(this.orderUrl, order).subscribe();
6 What is the RouterModule.forRoot method used for?
- ARegistering any providers that you intend to use in routed components.
- BRegistering route definitions at the root application level.
- CIndicating that Angular should cheer on your routes to be successful.
- DDeclaring that you intend to use routing only at the root level.
7 Which DOM elements will this component metadata selector match on?
@Component({
selector: 'app-user-card',
. . .
})- AAny element with the attribute app-user-card, such as <div app-user-card></div>.
- BThe first instance of <app-user-card></app-user-card>.
- CAll instances of <app-user-card></app-user-card>.
- DAll instances of <user-card></user-card>.
8What is the correct template syntax for using the built-in ngFor structural directive to render out a list of productNames?
- A<ul>
<li [ngFor]="let productName of productNames">{{ productName }}</li>
</ul> - B<ul>
<li ngFor="let productName of productNames">{{ productName }}</li>
</ul> - C<ul>
<li *ngFor="let productName of productNames">{{ productName }}</li>
</ul> - D<ul>
<? for productName in productNames { ?>
<li>{{ productName }}</li>
<? } ?>
</ul>
- A<ul>
9 What are the two component decorator metadata properties used to set up CSS styles for a component?
- AviewEncapsulation and viewEncapsulationFiles.
- BThere is only one and it is the property named css.
- Ccss and cssUrl.
- Dstyles and styleUrls.
10With the following component class, what template syntax would you use in the template to display the value of the title class field?
@Component({
selector: 'app-title-card',
template: '',
})
class TitleCardComponent {
title = 'User Data';
}- A{{ 'title' }}
- B{{ title }}
- C[title]
- DA class field cannot be displayed in a template via the template syntax.
11What is the purpose of the valueChanges method on a FormControl?
- AIt is used to configure what values are allowed for the control.
- BIt is used to change the value of a control to a new value. You would call that method and pass in the new value for the form field. It even supports passing in an array of values that can be set over time.
- CIt returns a Boolean based on if the value of the control is different from the value with which it was initialized.
- DIt is an observable that emits every time the value of the control changes, so you can react to new values and make logic decisions at that time.
12What directive is used to link an <a> tag to routing?
- ArouteTo
- BrouterLink
- CroutePath
- DappLink
13What is the Output decorator used for in this component class?
- AIt makes the itemTotalChanged class field public.
- BIt provides a way to bind values to the itemTotalChanged class field, like so: <app-shopping-cart [itemTotalChanged]="newTotal"></app-shopping-cart>.
- CIt provides a way to bind events to the itemTotalChanged class field, like so: <app-shopping-cart (itemTotalChanged)="logNewTotal($event)"></app-shopping-cart>.
- DIt is simply a way to put a comment in front of a class field for documentation.
14What is the difference between these two markup examples for conditionally handling display?
<div *ngIf="isVisible">Active</div>
<div [hidden]="!isVisible">Active</div>- AThe ngIf is shorthand for the other example. When Angular processes that directive, it writes a div element to the DOM with the hidden property.
- BThey are fundamentally the same.
- CThe ngIf directive does not render the div in the DOM if the expression is false. The hidden property usage hides the div content in the browser viewport, but the div is still in the DOM.
- DThe ngIf is valid, but the use of the hidden property is wrong and will throw an error.
15How can you disable the submit button when the form has errors in this template-driven forms example?
<form #userForm="ngForm">
<input type="text" ngModel name="firstName" required />
<input type="text" ngModel name="lastName" required />
<button (click)="submit(userForm.value)">Save</button>
</form>- A<button (click)="submit(userForm.value)" disable="userForm.invalid">Save</button>
- B<button (click)="submit(userForm.value)" [disabled]="userForm.invalid">Save</button>
- C<button (click)="submit(userForm.value)" [ngForm.disabled]="userForm.valid">Save</button>
- D<button (click)="submit(userForm.value)" *ngIf="userForm.valid">Save</button>
16You want to see what files would be generated by creating a new contact-card component. Which command would you use?
- Ang generate component contact-card --dry-run
- Bng generate component contact-card --no-files
- Cng generate component component --dry
- Dng generate component --exclude
17 Based on the following component, what template syntax would you use to bind the TitleCardComponent's titleText field to the h1 element title property?
@Component({
selector: 'app-title-card',
template: '<h1 title="User Data"> {{titleText}}</h1>',
})
export class TitleCardComponent {
titleText = 'User Data';
}- A<h1 data-title="titleText">{{ titleText }}</h1>
- B<h1 title="titleText">{{ titleText }}</h1>
- C<h1 [title]="titleText">{{ titleText }}</h1>
- D<h1 titleText>{{ titleText }}</h1>
18What are Angular lifecycle hooks?
- Aloggers for tracking the health of an Angular app
- Bproviders that can be used to track the instances of components
- Cbuilt-in pipes that can be used in templates for DOM events
- Dreserved 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
19Pick the best description for this template syntax code:
<span>Boss: {{job?.bossName}} </span>- AThe ? is shorthand for the async pipe. The job value must be an Observable.
- BIt 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.
- CThere is an error in the template syntax. The ? is not valid here.
- DIt is diplaying the job value if it has one; otherwise it is displaying the bossName.
20How 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)?
- A{ path: 'user/:id', component: UserDetailComponent }
- B{ url: 'user/:id', routedComponent: UserDetailComponent }
- C{ routedPath: 'user/:id', component: UserDetailComponent }
- D{ destination: new UserDetailComponent(), route: 'user/:id' }
Information
- Description
- Angular Linkedin Assessments Test Quiz on Q1-Q20, created by Nouri Atef on 18/05/2022.
- Author
- Nouri Atef
- Language
- English
- Views
- 0
- History
- Created on 18 May 2022 · updated on 17 Jul 2022
- Tags
- Rating
- No ratings yet Rate this quiz