AngularJs MCQ: AngularJs Multiple Choice Questions and Answers

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 are Angular lifecycle hooks?

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

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>

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>

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 method is used to wire up a FormControl to a native DOM input element in reactive forms?

Pick the best description for this template syntax code:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 valueChanges method on a FormControl?

What does this code accomplish?

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

platformBrowserDynamic().bootstrapModule(AppModule);

What is the RouterModule.forRoot method used for?

Which DOM elements will this component metadata selector match on?

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

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 difference between the paramMap and the queryParamMap on the ActivatedRoute class?

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 is the difference, if any, of the resulting code logic based on these two provider configurations?

[{ provide: FormattedLogger, useClass: Logger }][{ provide: FormattedLogger, useExisting: Logger }];

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 is the difference between these two markup examples for conditionally handling display?

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

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>

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

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