Data Card Been around for four years. ``` - [ ] ```javascript

Data Card ``` # Given the app-title-card component in the code below, what DOM will the app-user-card component render? ```javascript @Component({ selector: 'app-user-card', template: '

Jenny Smith

' }) @Component({ selector: 'app-title-card', template: '

User Data' }) // usage of user card component in parent component html ``` - [x] ```javascript

User Data

Jenny Smith

``` - [ ] ```javascript

User Data

Jenny Smith

``` - [ ] ```javascript ``` - [ ] ```javascript

User Data

Jenny Smith

``` # Pick the matching code for the custom provider registration that the @Inject () decorator is looking for: ```javascript constructor(@Inject('Logger') private logger) { } ``` - [ ] ```javascript providers: [Logger]; ``` - [x] ```javascript providers: [{ provide: 'Logger', useClass: Logger }]; ``` - [ ] ```javascript @Injectable({ providedln: 'root' }) ``` - [ ] ```javascript providers: [{ provide: 'Logger' }]; ``` [StackOverflow](https://stackoverflow.com/a/37315355) [TektutorialHub](https://www.tektutorialshub.com/angular/angular-injector-injectable-inject/) [Angular.io - Dependency Injection In Action](https://angular.io/guide/dependency-injection-in-action#supply-a-custom-provider-with-inject) # Which choice best describes the following usage of the HttpClient.get method in the getsettings class method? ```javascript export class SettingsService { constructor(private httpClient: HttpClient) { } ... getSettings() { return this.httpClient.get(this.settingsUrl) .pipe( retry(3) ); }} ``` - [ ] The RxJs pipe method is an alias for the subscribe method, so a call to `getSettings` will execute the get query. The retry operator is used to tell the pipe call to retry the get query three times. - [ ] It will produce an error at runtime because the pipe method is not available off of the `Httpclient.get` call. - [ ] Every single call to the getSettings method will result in the Httpclient making three total get requests to the settingsUrl, which is not ideal because there will always be two extra calls that are not needed. The retry operator should not be used in this manner. - [x] When the result of the getSettings method is subscribed to, the HTTP GET call will be made; if it fails, it will be retried up to three times before it gives up and returns an error. [learnrxjs.io](https://www.learnrxjs.io/learn-rxjs/operators/error_handling/retry) [dev.to](https://dev.to/gparlakov/how-does-rxjs-retry-work-412p) # When a service requires some setup to initialize its default state through a method, how can you make sure that said method is invoked before the service gets injected anywhere? - [ ] Put the logic of that service method into the service constructor instead. - [x] Use a factory provider at the root AppModule level that depends on the service to call that service method. - [ ] it is not possible to do it at application start; you can do it only at a component level. - [ ] Instantiate an instance of the service at the global level (window scope) and then call that method. # What statement best describes this usage of the TestBed? ```javascript const spy = jasmine.createSpyObj('DataService', ['getUsersFromApi']); TestBed.configureTestingModule({ providers: [UserService, { provide: DataService, useValue: spy }], }); const userService = TestBed.get(UserService); ``` - [ ] The TestBed is required anytime you want to make use of a spy object in a unit test for an Angular provider. - [ ] The TestBed is being used to test a component's view. - [x] The TestBed scaffolds an NgModule with two providers and handles any dependency injection. If any Angular class requests the DataService in its constructor, the TestBed will inject spy in that constructor. - [ ] The TestBed is configuring the test runner to tell it to only execute tests for the two providers listed in its providers array. - `All other tests be ignored, including tests that assert results against one of these providers and a non-defined provider.` `Although it will work when multiple providers in this configuration are asserted against in a single test.` # What is the primary difference between a component and a directive? - [ ] A component uses a selector metadata property and a directive does not. - [ ] A directive can be used for adding custom events to the DOM and a component cannot. - [x] A component has a template and a directive does not. - [ ] A directive can target only native DOM elements. [StackOverflow](https://stackoverflow.com/a/34616190) # What could you add to this directive class to allow the truncate length to be set during directive usage in markup? ``` @Directive({ selector: '[appTruncate]' }) export class TruncateDirective { . . . } // example of desired usage:

Some very long text here

``` - [x] `@Input() appTruncate: number;` - [ ] `@Output() appTruncate;` - [ ] `constructor(maxLength: number) { }` - [ ] `Nothing. The directive selector cannot be used to pass in values to the directive.` [Angular.io](https://angular.io/guide/attribute-directives#passing-values-into-an-attribute-directive) [StackOverflow](https://stackoverflow.com/a/46303049) # How can you pass query parameters to this `HttpClient.get` request? ``` export class OrderService { constructor(private httpClient: HttpClient) { } getOrdersByYear(year: number): Observable { return this.httpClient.get(this.ordersUrl); } } ``` - [ ] `return this.httpClient.get(this.ordersUrl, {'year': year})` - [ ] `return this.httpClient.get(this.ordersUrl, year)` - [x] ``` const options = {params: new HttpParams().set('year', year) }; return this.httpClient.get(this.ordersUrl, options); ``` - [ ] ```angularjs getOrdersByYear(year: number): Observable { return this.httpClient.addParam('year', year).get(this.ordersUrl, year); } ``` [StackOverflow](https://stackoverflow.com/a/34475594) [TektutorialHub](https://www.tektutorialshub.com/angular/angular-pass-url-parameters-query-strings/#httpparams) # Assuming the `DataService` has been registered in the providers for the application, which answer best describes what happens based on this component's constructor? ``` @Component({ ... }) export class OrderHistoryComponent { constructor(private dataService: DataService) {} ... } ``` - [ ] It is declaring that the `OrderHistoryComponent` will have its own version of a `DataService` and that it should never use any existing instances. The `DataService` would need to be instantiated within the class as a private field for this code to be complete and working. - [x] When Angular creates a new instance of the `OrderHistoryComponent`, the injector will provide an instance of a `DataService` class to the component constructor's first argument. The constructor's `dataService` parameter will be used to set a private instance field with the same name on the instance. - [ ] It provides a way to do component testing only; the constructor has no usage in the actual run of the Angular application. - [ ] It enables the custom element that the component targets to have a custom property named `dataService` that can be used to bind an existing `DataService` instance to. [StackOverflow](https://stackoverflow.com/a/49755822) [Angular.io - Dependency Injection](https://angular.io/guide/dependency-injection) # Finish this markup using the `ngIf` directive to implement an else case that will display the text "User is not active": ```angular2html

Currently active!

``` - [ ] ```angular2html

User is not active.

``` - [ ] ```angular2html

User is not active.

``` - [ ] ```angular2html

User is not active.

``` - [x] ```angular2html

User is not active.

``` [Angular.io](https://angular.io/api/common/NgIf) # What is the correct syntax for a route definition to lazy load a feature module? - [ ] ``` { path: 'users', lazy: './users/users.module#UsersModule' } ``` - [x] ``` { path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UserModule) } ``` - [ ] ``` { path: 'users', loadChildren: './users/users.module#UsersModule' } ``` - [ ] ``` { path: 'users', module: UsersModule } ``` [Angular.io - Lazy Loading Modules](https://angular.io/guide/lazy-loading-ngmodules) # Describe how the validation is set up and configured in this reactive forms example: ``` export class UserFormControl implements OnInit { ... ngOnInit() { this.form = this.formBuilder.group({ username: this.formBuilder.control('', [Validators.required, Validators.minLength(5), this.unique]), )}; } unique(control: FormControl) { return control.value !== 'admin' ? null: {notUnique: true}; } } ``` - [ ] The `FormControl` for `username` is getting configured to exclude three validators from the validators that it is allowed to use. - [ ] The `FormControl` for `username` is getting configured to allow three possible validators to be used: `required, maxLength`, and a custom one named `unique`. To enable these `validators`, a validator directive would need to be put on the form fields in the markup. - [ ] Validation cannot be set up this way in reactive forms. - [x] The `FormControl` for `username` is getting configured with three validators: the `required` and `minLength` validators that come from Angular, and a custom validator function named `unique` that checks for the value not equal to the string `admin`. [Angular.io - Form Validation](https://angular.io/guide/form-validation) [Angular University Blog](https://blog.angular-university.io/angular-custom-validators/) # What does the Injectable decorator do on this service class? ``` @Injectable({ providedIn: 'root' )} export class DataService { } ``` - [ ] It registers a provider for the service that is available only at the root module level, not to any children modules. - [x] It registers a provider for the service in the root application injector, making a single instance of it available throughout the application. - [ ] It makes it so the service can be injected only in the bootstrapped component for the application. - [ ] It sets up a compile time rule that allows you to put the service type only in the providers metadata property of the root NgModule. [Angular.io](https://angular.io/guide/providers#providing-a-service) # Describe the usage of this code ``` export interface AppSettings { title: string; version: number; } export const APP_SETTINGS = new InjectionToken('app.settings'); ``` - [ ] The InjectionToken is adding an instance of the AppSettings to the root provider via the InjectionToken constructor call, making it automatically available to all NgModules, services and components throughout the Angular application without the need to inject it anywhere. - [x] The InjectionToken is used to create a provider token for a non-class dependency. An Object literal can be provider as a value for the APP_SETTINGS dependency provider type that can then be injected into components, services, etc .. - [ ] The InjectionToken is used to create a dynamic decorator for the AppSettings that can be used on constructor parameters via an @AppSettings decorator. - [ ] This code has an error since you cannot use a TypeScript interface for the generic type on the InjectionToken # For the following template-driven forms example, what argument can be passed to the submit method in the click event to submit the data for the form? ``` Save ``` - [x] submit(form.value) - [ ] submit($event) - [ ] submit(ngForm.value) - [ ] submit(FirstName, lastName) # What is the purpose of the prelodingStrategy property configuration in this router code? ``` RouterModule.forRoot ( ... { preloadingStrategy: PreloadAllModules } ) ``` - [ ] It enables the option to flag individual routes for preloading. - [ ] It preloads all dependencies for routes, creating instances of services when the app first starts up - [ ] It ensures all modules get built into a single app module bundle file. - [ ] It configures the router to immediately load all routes that have a loadChildren property(routes that are typically loaded when requested) # What is an alternative way to write this markup to bind the value of the class field `userName` to the `h1` element title property? ```html

Current user is {{ userName }}

``` - [ ] title="userName" - [x] title="{{ userName }}" - [ ] title="{{ 'userName' }}" - [ ] The only way to do it is by using the square brackets. # What is the `async` pipe doing in this example? ```ts @Component({ selector: 'app-users', template: '

{{ user.name }}

', }) export class UsersComponent implements OnInit { users; constructor(private httpClient: HttpClient) {} ngOnInit(): void { this.users = this.httpClient.get<{ name: string }>('users'); } } ``` - [ ] It is doing nothing, since the async pipe cannot be used in an `ngFor` statement. - [ ] It is configuring the `ngFor` iteration to support multiple lists of users at the same time. - [x] It is subscribing to the observable returned from the `HttpClient.get` method and unwrapping the returned value so it can be iterated over in the `ngFor`. - [ ] It is allowing all of the users in the `users` field to be rendered concurrently to the DOM. # How would you make use of this directive in markup based on its selector value ```ts @Directive({ selector: '[appTruncate]' }) export class TruncateDirective{ . . . } ``` - [ ] `html

Some long text

` - [x] `html

Some long text

` - [ ] `html

Some long text

` - [ ] `html Some long text ` # What lifecycle hook can be used on a component to monitor all changes to @Input values on that component? - [ ] ngOnInit - [ ] ngChanges - [ ] ngAfterInputChange - [x] ngOnChanges [How to detect when an @Input() value changes in Angular?](https://stackoverflow.com/a/44686085/1573267) # What would be an example template syntax usage of this custom pipe? ```ts @Pipe({ name: 'truncate' }) export class TruncatePipe implements PipeTransform { transform(value: string, maxLength: number, showEllipsis: boolean){ const newValue = maxLength ? value.substr(0, maxLength): value; return showEllipsis ? '${newValue}...` : newValue; } } ``` - [x] {( 'some long text' | truncate:10 }) - [ ] {( 'some long text' | truncate:10:true }) - [ ] {( 'some long text' | truncate }) - [ ] all of these answers [do recheck the answers] # Which Angular CLI command would you run to generate a UsersComponent and add it to the SharedModule (in file shared.module.ts in your application)? - [ ] ng generate component --newModule=shared - [ ] ng generate component users --module=shared - [ ] ng generate component users --shared - [ ] ng generate component --add=shared [do recheck the answers] # How can you rewrite this markup so the div container is not needed in the final DOM render ```javascript

{{ location.name }}

{{ location.description }}

``` - [ ] ```javascript

{{ location.name }}

{{ location.description }}

{{ endNgIf }} ``` - [ ] ```javascript

{{ location.name }}

{{ location.description }}

``` - [ ] ```javascript

{{ location.name }}

{{ location.description }}

``` - [x] ```javascript

{{ location.name }}

{{ location.description }}

``` [recheck answers] # Describe the usage of this code: ```javascript export interface AppSettings { title: string; version: number; } ``` - [ ] This code as an error since you cannot use a TypeScript interface for the generic type on the InjectionToken. - [ ] The InjectionToken is used to create a provider token for a non-class dependency. An object lieteral can be provided as a value for the APP_SETTINGS dependency provider type that can then be injected into components, services, etc. - [ ] The InjectionToken is adding an instance of the AppSettings to the roote provider via the the InjectionToken constructor call, making it auto available to all NgModules, services, and componentts throughtout the Angular application without the need to inject it anywhere. - [ ] The InjectionToken is used to create a dynamic decorator for the AppSettings that can be sed on constructor parameters via an @AppSettings decorator. [recheck answers] # What Angular utilities, if any, are required to unit test a service with no constructor dependencies? - [ ] By.css() helper method is needed - [ ] A text fixture is required to run the service for the unit test. - [ ] None. A service can be instantiated and unit tested on its own. - [x] The TestBed class iss needed to instantiate the service. [Angular unit tests](https://angular.io/guide/testing-services) - recheck answers # What is the difference between the CanActivate and the CanLoad route guards? - [ ] CanActivate is used to check access. CanLoad is used to preload data for the route. - [x] CanLoad is used at app startup to allow or deny routes to be added to the route table. CanActivate is used to manage access to routes at the time they are requested. - [ ] CanActivate and CanLoad do the exact same thing. - [ ] CanLoad prevents an entire NgModule from being delivered and loaded. CanActivate stops routing to a component in that NgModule, but that module is still loaded. [CanActivate vs Canload](https://stackoverflow.com/questions/42026045/difference-between-angulars-canload-and-canactivate#:~:text=canActivate%20is%20used%20to%20prevent,not%20authorized%20to%20do%20so.) CanActivate prevents access on routes, CanLoad prevents lazy loading. # What is the outlet property used for in this router definition object? ```javascript { path: 'document', component: DocumentComponent, outlet: 'document-box' } ``` - [ ] it will locate all instancess of in the DOM and inser a DocumentComponent element into them on route navigation. - [ ] It declares that the DocumentComponent can be used as a child to a < element in addition ot being routed to. - [x] It us used to target a element with the name attribute matching the string value as the location for the DocumentComponent to be rendered when routed to. - [ ] It is a source of power for the router. (definitely not the answer :P) [Angular-outlet](https://angular.io/api/router/RouterOutlet) - recheck answer