AngularJs MCQ: AngularJs Multiple Choice Questions and Answers

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>

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

<h1 #headerText>User List</h1>

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

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>

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 purpose of the ContentChildren decorator in this component class?

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

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 does this code accomplish?

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

platformBrowserDynamic().bootstrapModule(AppModule);

Which DOM elements will this component metadata selector match on?

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

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 RouterModule.forRoot method used for?

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

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

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

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

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

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>

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

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

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>

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

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

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

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

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

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