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?

<ul>
  <li [ngFor]="let productName of productNames"></li>
</ul>
<ul>
  <li ngFor="let productName of productNames"></li>
</ul>
<ul>
  <li *ngFor="let productName of productNames"></li>
</ul>
<ul>
  <? for productName in productNames { ?>
  <li></li>
  <? } ?>
</ul>

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>
<button (click)="submit(userForm.value)" disable="userForm.invalid">Save</button>
<button (click)="submit(userForm.value)" [disabled]="userForm.invalid">Save</button>
<button (click)="submit(userForm.value)" [ngForm.disabled]="userForm.valid">Save</button>
<button (click)="submit(userForm.value)" *ngIf="userForm.valid">Save</button>

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>

Angular.io -Show and hide validation error

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

Angular.io - Dependency Providers

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

TektutorialsHub

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>
    <span *ngIf="username.minLength.invalid"
        Username length is not valid
    </span>
<input type="text" formControlName="username" [showMinLength]="true"
    <span *ngIf="form.get('username').getError('minLength') as minLengthError">
      Username must be at least  characters.
    </span>
<input type="text" formControlName="username" #userName="ngModer">
    <span *ngIf="userName.errors.minlength"
      Username must be at least  characters.
    </span>

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);

StackOverflow

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>
 <app-card>
  <h1>Data Card</hl>
  <app-bio>
   Been around for four years.
  </app-bio>
 </app-card>
<h1>Data Card</h1>
 <app-bio>
  Been around for four years.
 </app-bio>
<app-card>
  <h1>Data Card</hl>
  <ng-content></ng-content>
  <app-bio>
   Been around for four years.
   <ng-content></ng-content>
  </app-bio>
</app-card>
<app-card>
  <h1>Data Card</hl>
</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>
<app-user-card>
  <app-title-card>
    <h1>User Data</h1>
  </app-title-card>
  <p>Jenny Smith</p>
</app-user-card>
<h1>User Data</h1>
<p>Jenny Smith<p>
<app-user-card>
  <app-title-card></app-title-card>
</app-user-card>
<div app-user-card>
  <h1 app-title-card>User Data</h1>
  <p>Jenny Smith</p>
</div>

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

constructor(@Inject('Logger') private logger) { }
providers: [Logger];
providers: [{ provide: 'Logger', useClass: Logger }];
@Injectable({
    providedln: 'root'
})
providers: [{ provide: 'Logger' }];

StackOverflow

TektutorialHub

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

learnrxjs.io

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?

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);

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>

Angular.io

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);
    }
}
const options = {params: new HttpParams().set('year', year) };
return this.httpClient.get<Order[]>(this.ordersUrl, options);
getOrdersByYear(year: number): Observable<Order[]> {
    return this.httpClient.addParam('year', year).get<Order[]>(this.ordersUrl, year);
}

StackOverflow

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) {}
    ...
}

StackOverflow

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>
<div #inactive>
  User is not active.
</div>
<div *ngIf="inactive">
  User is not active.
</div>
<ng-template #else="inactive">
  <div>User is not active.</div>
</ng-template>
<ng-template #inactive>
  <div>User is not active.</div>
</ng-template>

Angular.io

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

{
    path: 'users',
    lazy: './users/users.module#UsersModule'
}
{
    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

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

Angular.io - Form Validation

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 Injection<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
	}
)

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{
	. . .
}