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

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

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

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

Which DOM elements will this component metadata selector match on?

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

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

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

{
      path: 'customers',
      component: CustomerListComponent,
      data: { accountSection: true }
  }

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">{{ user.name }}</div>
<h2>Ages</h2>
<div *ngFor="let user of users | async">{{ user.age }}</div>
<h2>Genders</h2>
<div *ngFor="let user of users | async">{{ user.gender }}</div>

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

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

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

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

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

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

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

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

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>

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

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

1. 

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

2. 

<ul>
  <li ngFor="let productName of productNames">{{ productName }}</li>
</ul>

3. 

<ul>
  <li *ngFor="let productName of productNames">{{ productName }}</li>
</ul>

4. 

<ul>
  <? for productName in productNames { ?>
  <li>{{ productName }}</li>
  <? } ?>
</ul>

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

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>

1. 

<button (click)="submit(userForm.value)" disable="userForm.invalid">Save</button>

2. 

<button (click)="submit(userForm.value)" [disabled]="userForm.invalid">Save</button>

3. 

<button (click)="submit(userForm.value)" [ngForm.disabled]="userForm.valid">Save</button>

4. 

<button (click)="submit(userForm.value)" *ngIf="userForm.valid">Save</button>

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">{{ product.name }}</div>',
})
export class ProductComponent {
  @Input() product;
}

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

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

What are Angular lifecycle hooks?

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

<h1 #headerText>User List</h1>

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

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

Pick the best description for this template syntax code:

<span>Boss: {{job?.bossName}} </span>

What does this code accomplish?

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

platformBrowserDynamic().bootstrapModule(AppModule);

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

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

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

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

What directive is used to link an <a> tag to routing?

What is the RouterModule.forRoot method used for?

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