Visual Studio Code

Following codes are used in “newbook.page.html” file and “newbook.page.ts” file (on next page. Fill in blanks for questions 21 to 25

21.Which of the following codes should be used to fill in the blank at (Q21)?

1. slot="left"

1. slot="primary"

1. slot="start"

1. slot="icon-only"

22. Which of the following codes should be used to fill in the blank at (Q22)?

1. #newform="ngForm"

1. [formGroup] ="form"

1. #f="ngForm"

1. [formGroup] ="f"

newbook.page.html

<ion-header>

<ion-toolbar>

<ion-buttons _____(Q21)______ >

<ion-back-button defaultHref="/tabs/tab1"></ion-back-button>

</ion-buttons>

<ion-title>Add a New Book</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<form (ngSubmit)="onAddBook()" _____(Q22)______ >

<ion-grid>

<ion-row>

<ion-col>

<ion-item>

<ion-label position="floating">Book Title</ion-label>

<ion-input type="text" ngModel name="title" required></ion-input>

</ion-item>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-item>

<ion-label position="floating">Book Author</ion-label>

<ion-input type="text" ngModel name="author" required></ion-input>

</ion-item>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-item>

<ion-label position="floating">Short Description</ion-label>

<ion-textarea rows="6" ngModel name="desc" required></ion-textarea>

</ion-item>

</ion-col>

</ion-row>

<ion-row>

<ion-col>

<ion-button type="submit" expand="block"

[disabled]="!newform.valid">Add</ion-button>

</ion-col>

</ion-row>

</ion-grid>

</form>

</ion-content>

newbook.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';

import { BookService } from '../book.service';

import { NgForm } from '@angular/forms';

import { Router } from '@angular/router';

@Component({

selector: 'app-newbook',

templateUrl: './newbook.page.html',

styleUrls: ['./newbook.page.scss'],

})

export class NewbookPage implements OnInit {

@ViewChild('newform') form: NgForm;

constructor( _____(Q23)______ ,

private router: Router) { }

ngOnInit() {

}

onAddBook() {

this.bookService.addBook(

this.form.value['title'],

this.form.value['author'],

_____(Q24)______ ;

this.router.navigate(['/tabs/tab1']);

}

}

23. Which of the following codes should be used to fill in the blank at (Q23)?

1. private modalCtrl: ModalController

1. private bookService: BookService

1. private form: ReactiveFormModule

1. private form: FormModule

24. Which of the following codes should be used to fill in the blank at (Q24)?

1. this.form.description

1. this.form.desc

1. this.form.value['description'])

1. this.form.value['desc'])

25. If this form fails to run in the emulation, it is because you have not imported FormsModule into: