AngularJs MCQ: AngularJs Multiple Choice Questions and Answers

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

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

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

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

Which DOM elements will this component metadata selector match on?

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

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 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 ViewChild decorator in this component class?

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

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

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

Pick the best description for this template syntax code:

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

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

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

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

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

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

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

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

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

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 is the purpose of the valueChanges method on a FormControl?