angular quizzes Flashcards
Which conditional directive with Angular template will display ‘Sheridan’ if variable school is equal to ‘Sheridan’ initially?
<p *ngIF=”(school | uppercase) === ‘SHERIDAN’; else other”>Sheridan</p>
<ng-template #other>
<p>GTA</p>
</ng-template>
<p *ngIf=”(school | uppercase) = ‘SHERIDAN’; else other”>Sheridan</p>
<ng-template #other>
<p>GTA</p>
</ng-template>
<p *ngIf=”(school | uppercase) === ‘Sheridan’; else other”>Sheridan</p>
<ng-template #other>
<p>GTA</p>
</ng-template>
<p *ngIf=”(school | uppercase) === ‘SHERIDAN’; else other”>Sheridan</p>
<ng-template #other>
<p>GTA</p>
</ng-template>
<p *ngIf=”(school | uppercase) === ‘SHERIDAN’; else other”>Sheridan</p>
<ng-template #other>
<p>GTA</p>
</ng-template>
Which Angular element is used to render HTML but is never directly displayed?
ngStyle
ng-template
ngModel
ngClass
ng-template
In Angular, what type of binding allows us to set attributes of an HTML tag to a specific value based on a condition?
interpolation binding
property binding
event binding
2-way binding
property binding
In Angular, what type of binding allows data flow from component data to the screen and then back to the component data?
event binding
property binding
2-way binding
interpolation binding
2-way binding
seasons = [“Fall”, “Winter”, “Spring”, “Summer”];
Which statement will create an unordered list using an Angular ngFor to list each season as a list item
<ul>
<li>{{x}}</li>
</ul>
<ul *ngFor=”let x of seasons”>
<li>x</li>
</ul>
<ul *ngFor=”let x of seasons”>
<li>{{x}}</li>
</ul>
<ul *ngFor=”let x of seasons”>
{{x}}
</ul>
<ul *ngFor=”let x of seasons”>
<li>{{x}}</li>
</ul>
sheridan.component.html
<input [(ngModel)]=”shcollege”>Enter a college name
Which paragraph and Angular template will include a paragraph that will display “Sheridan College” if shcollege is equal to “Sheridan” and “Another College” if not; make sure the check includes all types of entry for the input box.
<p *ngIf=”(shcollege | uppercase) === ‘SHERIDAN’; else other”>Sheridan College</p>
<ng-template> <p>Another college</p> </ng-template>
<p *ngIf=”(shcollege | uppercase) === ‘Sheridan’; else other”>Sheridan College</p>
<ng-template #other> <p>Another college</p> </ng-template>
<p>Sheridan College</p>
<ng-template #other> <p>Another college</p> </ng-template>
<p *ngIf=”(shcollege | uppercase) === ‘SHERIDAN’; else other”>Sheridan College</p>
<ng-template #other> <p>Another college</p> </ng-template>
<p *ngIf=”(shcollege | uppercase) === ‘SHERIDAN’; else other”>Sheridan College</p>
<ng-template #other> <p>Another college</p> </ng-template>
college: string = “Sheridan College”;
startDate = new Date();
Which statement will display an HTML h3 header that contains the following:
<college><br></br>
Current Date: <startDate variable formatted for 'M/d/yy, h:mm a' output>
------------------------------------
<h3>
{ {college | uppercase} } <br></br>
{ {startDate | date: 'short'} }
</h3>
<h3>
{ {college | uppercase} } <br></br>
{ {startDate | date: 'long'} }
</h3>
<h3>
{ {college} } <br></br>
{ {startDate | date: 'short'} }
</h3>
<h3>
{ {college | uppercase} } <br></br>
{ {startDate | date = 'short'} }
</h3>
</college>
<h3>
{ {college | uppercase} } <br></br>
{ {startDate | date: 'short'} }
</h3>
app.component.ts - College Class imported that contains cname and cprov:
college : College = {cname: “Sheridan”, cprov: “Ontario”}
app.component.html - sheridan component created and included:
<app-sheridan></app-sheridan>
sheridan.component.ts - College Class imported and Input decorator included in initial import
Which statement will create a variable in sheridan.component.ts that is open to the passing of data from the parent component (app) called shcollege that is based on the College class
Input() shcollege: College;
@Input() shcollege: College;
@Input shcollege: College;
@Input() shcollege = College;
Question 5 0.125 / 0.125 points
app.component.ts - College Class imported that contains cname and cprov:
college : College = {cname: “Sheridan”, cprov: “Ontario”}
app.component.html - sheridan component created and included:
<app-sheridan></app-sheridan>
sheridan.component.ts
College Class imported and Input decorator included in initial import
Variable created called shcollege that is open for the passing of data from the parent component
——————————–
In app.component.html, which call for the <app-sheridan> component will pass the data from the parent component to the child component (app >> app-sheridan)</app-sheridan>
<app-sheridan “shcollege”=”college”></app-sheridan>
<app-sheridan [college]=”shcollege”></app-sheridan>
<app-sheridan [shcollege]=”college”></app-sheridan>
<app-sheridan [shcollege]:”college”></app-sheridan>
<app-sheridan [shcollege]=”college”></app-sheridan>
Which Angular Material button will display a raised button that includes the text “Add to” followed by the shopping_cart icon that is displayed in the primary theme colour
<button>
Add to <mat-icon>shopping_cart</mat-icon>
</button>
<button></button>
<mat-icon>shopping_cart</mat-icon>
Add to
</button>
<button></button>
<mat-icon>shopping_cart</mat-icon>
Add to
</button>
<button>
Add to <mat-icon>shopping_cart</mat-icon>
</button>
<button>
Add to <mat-icon>shopping_cart</mat-icon>
</button>
Which statement is used to create an Angular circular button that displays the text “ALERT” that includes an Angular click event that calls a function called “majorAlert()”. Have the button display using the Accent theme colour
<button mat-fab color=”accent”
(click)=”majorAlert()”>
ALERT
</button>
<button mat-fab color=”primary”
(click)=”majorAlert()”>
ALERT
</button>
<button mat-button color=”accent”
(click)=”majorAlert()”>
ALERT
</button>
<button>
ALERT
</button>
<button mat-fab color=”accent”
(click)=”majorAlert()”>
ALERT
</button>
sheridan.component.html
<input [(ngModel)]=”shcollege”>Enter a college name
<p>College Name: {{shcollege}}</p>
Which statement will correctly use an ngClass for the paragraph that will call 2 classes; one class called shcss that will change the formatting if shcollege is equal to “Sheridan”; another class called othercss that will change the formatting if shcollege is not equal to “Sheridan”; all types of entry must be checked
<p [ngClass]=”{shcss: (shcollege | uppercase)===’SHERIDAN’,
othercss: (shcollege | uppercase) != 'SHERIDAN'}">College Name: {{shcollege}}</p>
<p [ngClass]=”{shcss: (shcollege | uppercase)===’Sheridan’,
othercss: (shcollege | uppercase) != 'Sheridan'}">College Name: {{shcollege}}</p>
<p *ngClass=”{shcss: (shcollege | uppercase)===’SHERIDAN’,
othercss: (shcollege | uppercase) != 'SHERIDAN'}">College Name: {{shcollege}}</p>
<p [ngClass]=”{shcss: (shcollege)===’Sheridan’,
othercss: (shcollege) != 'Sheridan'}">College Name: {{shcollege}}</p>
<p [ngClass]=”{shcss: (shcollege | uppercase)===’SHERIDAN’,
What is the correct import line within the app component to load the qJSON.json file located in the assets/data folder into a variable called qdata?
import {qdata} from ‘assets/data/qJSON.json’;
import qdata from ‘../assets/data/qJSON.json’;
import qdata from ‘assets/data/qJSON.json’;
import {qdata} from ‘../assets/data/qJSON.json’;
import qdata from ‘../assets/data/qJSON.json’;
JSON File:
{ “solarSystem”: {
“name” : “Milky Way”,
“planets”: [
{ “planetName” : “Mercury”, “planetColor” : “Orange”,
“image” : “mercury.png”, “planetRadiusKM” : 2340 },
{ “planetName” : “Venus”, “planetColor” : “White”,
“image” : “venus.jpg”, “planetRadiusKM” : 6100 },
{ “planetName” : “Earth”, “planetColor” : “Blue”,
“image” : “earth.png”, “planetRadiusKM” : 6371 }
]
}
}
Based on the JSON file shown above, create an interface called YourloginnameSolar for the planets array only
interface YourloginnameSolar {
planetName: string;
planetColor: string;
image: string;
planetRadiusKM: number;
}
To set up a virtual structure for a JSON file, what would be the correct declaration?
import class Quiz {description: string; }
export class Quiz {description: string; }
export interface Quiz {description: string; }
import interface Quiz {description: string; }
export interface Quiz {description: string; }
