linkedin-skill-assessments-quizzes

Angular

Q1. What is the purpose of the ViewChild decorator in this component class?

@Component({
    ...
    template: '<p #bio></p>'
})
export class UserDetailsComponent {
    @ViewChild('bio') bio;
}

DigitalOcean - viewchild-access-component

Q2. What method is used to wire up a FormControl to a native DOM input element in reactive forms?

Angular.io - Reactive Form Groups

Q3. What is the difference between the paramMap and the queryParamMap on the ActivatedRoute class?

StackOverflow

Q4. Based 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?

<h2>Names</h2>
<div *ngFor="let user of users | async"></div>
<h2>Ages</h2>
<div *ngFor="let user of users | async"></div>
<h2>Genders</h2>
<div *ngFor="let user of users | async"></div>

UltimateCourses

Q5. How 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
  }
}

Angular.io - Sending data to server

Q6. What is the RouterModule.forRoot method used for?

O’REILLY

Q7. Which DOM elements will this component metadata selector match on?

@Component({
    selector: 'app-user-card',
    . . .
})

Angular.io - Component Metadata

Q8. What is the correct template syntax for using the built-in ngFor structural directive to render out a list of productNames?

Angular.io- Structural Directives

Q9. What are the two-component decorator metadata properties used to set up CSS styles for a component?

Angular.io - Component Styles

Q10. With 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';
}

Angular.io - String Interpolation or Text Interpolation

Q11. What is the purpose of the valueChanges method on a FormControl?

Angular.io - Displaying a from control value

Angular.io - RouterLink

Q13. What is the Output decorator used for in this component class?

@Component({
    selector: 'app-shopping-cart',
    . . .
})
export class ShoppingCartComponent {
    @Output() itemTotalChanged = new EventEmitter();
}

Angular.io - Sending data to parent component

Q14. What is the difference between these two markup examples for conditionally handling display?

<div *ngIf="isVisible">Active</div>
<div [hidden]="!isVisible">Active</div>

StackOverflow

Q15. How 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>

Angular.io - Submit the form with ngSubmit

Q16. You want to see what files would be generated by creating a new contact-card component. Which command would you use?

Angular.io - ng generate options

Q17. 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"> </h1>',
})
export class TitleCardComponent {
  titleText = 'User Data';
}

Angular.io - String Interpolation

Q18. What are Angular lifecycle hooks?

Angular.io - Lifecycle hooks

Q19. Pick the best description for this template syntax code:

<span>Boss:  </span>

StackOverflow

Q20. How 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)?

CodeCraft - Parameterised Routes

Q21. What are the HostListener decorators and the HostBinding decorator doing in this directive?

@Directive({
  selector: '[appCallout]',
})
export class CalloutDirective {
  @HostBinding('style.font-weight') fontWeight = 'normal';

  @HostListener('mouseenter')
  onMouseEnter() {
    this.fontWeight = 'bold';
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.fontWeight = 'normal';
  }
}

DigitalOcean

Q22. What Angular template syntax can you use on this template-driven form field to access the field value and check for validation within the template markup?

<input type="text" ngModel name="firstName" required minlength="4" />
<span *ngIf="">Invalid field data</span>
  1. Angular.io -Show and hide validation error
  2. Medium

Q23. What is the value type that will be stored in the headerText template reference variable in this markup?

<h1 #headerText>User List</h1>

Pluralsight - Template reference variable

Q24. What is the difference, if any, of the resulting code logic based on these two provider configurations?

[{ provide: FormattedLogger, useClass: Logger }][{ provide: FormattedLogger, useExisting: Logger }];
  1. Angular.io - Dependency Providers
  2. TektutorialHub

Q25. What is the purpose of the data property (seen in the example below) in a route configuration?

   {
       path: 'customers',
       component: CustomerListComponent,
       data: { accountSection: true }
   }
  1. TektutorialsHub
  2. StackOverflow

Q26. How does the built-in ngIf structural directive change the rendered DOM based on this template syntax?

@Component({
  selector: 'app-product',
  template: '<div *ngIf="product"></div>',
})
export class ProductComponent {
  @Input() product;
}

Reference (angular.io)

Q27. What does this code accomplish?

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Angular.io - The basic NgModule

Q28. Which choice best describes what the resolve property does in this route configuration?

{
   path: ':id',
   component: UserComponent,
   resolve: {
     user: UserResolverService
   }
}

angular.io

Q29. What is the purpose of the ContentChildren decorator in this component class?

@Component({
 . . .
 template: '<ng-content></ng-content>'
})
export class TabsListComponent {
 @ContentChildren(TabComponent) tabs;
}

betterprogramming.pub

Q30. In order for Angular to process components in an application, where do the component types need to be registered?

angular.io

Q31. What is the purpose of the fixture.detectChanges() call in this unit test?

TestBed.configureTestingModule({
  declarations: [UserCardComponent],
});
let fixture = TestBed.createComponent(UserCardComponent);

fixture.detectChanges();

expect(fixture.nativeElement.querySelector('h1').textContent).toContain(
  fixture.componentInstance.title,
);

angular.io

Q32. What will the URL segment look like based on the following call to the Router.navigate method when goToUser is passed the value 15?

export class ToolsComponent {
  constructor(private router: Router) {}
  goToUser(id: number) {
    this.router.navigate(['user', id]);
  }
}

angular.io

Q33. When a service is provided for root and is also added to the provider’s configuration for a lazy-loaded module, what instance of that service does the injector provide to constructors in the lazy-loaded module?

Q34. What is the HostBinding decorator doing in this directive?

@Directive({
  selector: ' [appHighlight] ',
})
export class HighlightDirective {
  @HostBinding('class.highlighted') highlight = true;
}

StackOverflow

Q35. In reactive forms, what Angular form class type is used on the native DOM <form> element to wire it up?

Q36. Assuming the username FormControl has been configured with a minLength validator, how can you set up an error display in the following reactive forms markup for the username field?

<form [formGroup]="form">
  <input type="text" formControlName="username" />
  ...
</form>

Codecraft

Q37. How does the emulated view encapsulation mode handle CSS for a component?

Angular.io

Q38. With the following TestBed setup, what can be used to access the rendered DOM for the UserCardComponent?

TestBed.configureTestingModule({
  declarations: [UserCardComponent],
});
let fixture = TestBed.createComponent(UserCardComponent);
  1. StackOverflow
  2. Angular.io

Q39. Given these two components, what will get rendered to the DOM based on the markup usage?

@Component({
 selector: 'app-card',
 template: '<h1>Data Card</h1><ng-content></ng-content>'
})
export class CardComponent { }

@Component({
 selector: 'app-bio',
 template: '<ng-content></ng-content>.
})
export class BioComponent { }

// markup usage:
<app-card><app-bio>Been around for four years.</app-bio></app-card>

Q40. Given the app-title-card component in the code below, what DOM will the app-user-card component render?

@Component({
   selector: 'app-user-card',
   template: '<app-title-card></app-title-card><p>Jenny Smith</p>'
})

@Component({
   selector: 'app-title-card',
   template: '<h1>User Data</hl>'
})

// usage of user card component in parent component html
<app-user-card></app-user-card>

Q41. Pick the matching code for the custom provider registration that the @Inject () decorator is looking for:

constructor(@Inject('Logger') private logger) { }
  1. StackOverflow
  2. TektutorialHub
  3. Angular.io - Dependency Injection In Action

Q42. Which choice best describes the following usage of the HttpClient.get method in the getsettings class method?

export class SettingsService {
    constructor(private httpClient: HttpClient) { }
    ...

getSettings()
{
    return this.httpClient.get<Settings>(this.settingsUrl)
        .pipe(
            retry(3)
        );
}}
  1. learnrxjs.io
  2. dev.to

Q43. 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?

  1. Angular.io
  2. Stackoverflow

Q44. What statement best describes this usage of the TestBed?

const spy = jasmine.createSpyObj('DataService', ['getUsersFromApi']);
TestBed.configureTestingModule({
  providers: [UserService, { provide: DataService, useValue: spy }],
});
const userService = TestBed.get(UserService);

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.

Q45. What is the primary difference between a component and a directive?

StackOverflow

Q46. 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:
<p [appTruncate]="10">Some very long text here</p>
  1. Angular.io
  2. StackOverflow

Q47. How can you pass query parameters to this HttpClient.get request?

export class OrderService {
  constructor(private httpClient: HttpClient) {}

  getOrdersByYear(year: number): Observable<Order[]> {
    return this.httpClient.get<Order[]>(this.ordersUrl);
  }
}
  1. StackOverflow
  2. TektutorialHub

Q48. 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) {}
    ...
}
  1. StackOverflow
  2. Angular.io - Dependency Injection

Q49. Finish this markup using the ngIf directive to implement an else case that will display the text “User is not active”:

<div *ngIf="userIsActive; else inactive">Currently active!</div>

Angular.io

Q50. What is the correct syntax for a route definition to lazy load a feature module?

Angular.io - Lazy Loading Modules

Q51. 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};
    }
}
  1. Angular.io - Form Validation
  2. Angular University Blog

Q52. What does the Injectable decorator do on this service class?

@Injectable({
    providedIn: 'root'
)}
export class DataService { }

Angular.io

Q53. Describe the usage of this code

export interface AppSettings {
  title: string;
  version: number;
}
export const APP_SETTINGS = new InjectionToken<AppSettings>('app.settings');

Q54. 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?

<form #form="ngForm">
  <input type="text" ngModel="firstName" /> <input type="text" ngModel="lastName" />
  <button (click)="submit()">Save</button>
</form>

Q55. What is the purpose of the prelodingStrategy property configuration in this router code?

RouterModule.forRoot(
  ...{
    preloadingStrategy: PreloadAllModules,
  },
);

References:

Q56. What is an alternative way to write this markup to bind the value of the class field userName to the h1 element title property?

<h1 [title]="userName">Current user is </h1>

Q57. What is the async pipe doing in this example?

@Component({
  selector: 'app-users',
  template: '<div *ngFor="let user of users | async"></div>',
})
export class UsersComponent implements OnInit {
  users;
  constructor(private httpClient: HttpClient) {}
  ngOnInit(): void {
    this.users = this.httpClient.get<{ name: string }>('users');
  }
}

Q58. How would you make use of this directive in markup based on its selector value

@Directive({  selector: '[appTruncate]'
})
export class TruncateDirective{  . . .
}

Q59. What lifecycle hook can be used on a component to monitor all changes to @Input values on that component?

How to detect when an @Input() value changes in Angular?

Q60. What would be an example template syntax usage of this custom pipe?

@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;
  }
}

[How do I call an Angular 2 pipe with multiple arguments?] (https://stackoverflow.com/questions/36816788/how-do-i-call-an-angular-2-pipe-with-multiple-arguments)

Q61. 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)?

Q62. How can you rewrite this markup so the div container is not needed in the final DOM render

<div *ngIf="location">
  <h1></h1>
  <p></p>
</div>

Q63. Describe the usage of this code:

export interface AppSettings {
  title: string;
  version: number;
}

Q64. What Angular utilities, if any, are required to unit test a service with no constructor dependencies?

Angular unit tests - recheck answers

Q65. What is the difference between the CanActivate and the CanLoad route guards?

CanActivate vs Canload CanActivate prevents access on routes, CanLoad prevents lazy loading.

Q66. What is the outlet property used for in this router definition object?

{  path: 'document',  component: DocumentComponent,  outlet: 'document-box'
}

Angular-outlet - recheck answer

Q67. In this template syntax, every time the items property is changed (added to, removed from, etc.), the ngFor structural directive re-runs its logic for all DOM elements in the loop. What syntax can be used to make this more performant?

<div *ngFor="let item of items"> - </div>

StackOverflow - How to use trackBy with ngFor

Q68. What does this Angular CLI command do?

ng build --configuration=production --progress=false

Angular documentation - ng build

Q69. Service classes can be registered as providers via which decorators?

Q70. What is the Input decorator used for in this component class?

@Component({  selector:'app-product-name',  ...
})
export class ProductNameComponent {  @Input() productName: string
}

Q71. Which route guard can be used to mediate navigation to a route?

Q72. How can you configure the injector to use an existing object for a token instead of having it instantiate a class instance?

Configuring dependency providers

Q73. Based on this route definition, what can be injected into UserDetailComponent constructor to get ahold of the id route parameter?

{path: 'user/:id', component: UserDetailComponent }

Common Routing Tasks

Q74. With the following reactive form markup, what would you add to wire up a call to an onSubmit class method?

<form [formGroup]="form">
  <input type="text" formControlName="username" />
  <button type="submit" [disabled]="form. invalid">Submit</button>
</form>

Angular - Forms

Q75. What is the expected DOM code for this usage of the ngClass attribute directive when isActive is true?

<div [ngClass]="{ ‘active-item': isActive }">Item One</div>

Angular - NgClass

Q76. Which answer best explains the usage of ngModel in this template code?

<input [(ngModel)]="user.name" />

Angular - NgModel

Q77. What method is used to wire up a FormControl to a native DOM input element in reactive forms?

Angular - Reactive Forms

Q78. What other template syntax (replacing the ngClass directive) can be used to add or remove the CSS class names in this markup?

<span [ngClass]="{ 'active': isActive, 'can-toggle': canToggle }"> Employed </span>

Q79. In this directive decorator example, what is the purpose of the multi property in the provider object literal?

@Directive({
  selector: '[customValidator]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: CustomValidatorDirective,
      multi: true,
    },
  ],
})
export class CustomValidatorDirective implements Validator {}

StackOverflow

Q80. Which Angular CLI command would you use to run your unit tests in a process that reruns your test suite on file changes?

Q81. What is the most common use for the ngOnDestory lifecle hook?

Q82. What NgModule decorator metadata property is leverage to allow other ….?

Q83. What is the difference between the CanActivate and the CanLoad rout guards?

Q84. With the following component class, what template syntax would you use in the template to display the result of calling the currentYear class function?

@Component({
  selector: 'app-date-card',
  template: '',
})
export class DateCardComponent {
  currentYear() {
    return new Date().getFullYear();
  }
}