Untitled Quiz
28 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is the purpose of setting 'resolveJsonModule' to true in tsconfig.json?

  • It allows TypeScript to import JSON modules as objects. (correct)
  • It disables the ability to create JSON files.
  • It simulates JSON file structures in TypeScript.
  • It enables automated serving of JSON files.

    • What must be done after modifying tsconfig.json?

  • Clear the browser cache.
  • Restart the TypeScript compiler.
  • Stop serving and then re-serve the Angular application. (correct)
  • Update all JSON files in the application.

    • Which of the following correctly declares variables to hold data from cpdata?

  • program: cpdata.ProgramData; courses: cpdata.courses; (correct)
  • program: Program; courses: Courses[];
  • const program: Courses; let courses: Program; use cpdata.json;
  • let program: Program = cpdata.courses; let courses: Courses = cpdata.ProgramData;

    • Which lifecycle hook can be used to initialize default data when a component is created?

    <p>ngOnInit (A)</p> Signup and view all the answers

    What is the best practice regarding term selection for displaying data in the application?

    <p>Load a default term to show data initially. (B)</p> Signup and view all the answers

    What lifecycle hook is used to initialize the termArray for Term 1 when the component is created?

    <p>ngOnInit() (A)</p> Signup and view all the answers

    What condition is checked to add courses to the termArray in ngOnInit()?

    <p>If x.term is equal to 1 (C)</p> Signup and view all the answers

    Which of the following actions is suggested after building each part of an app?

    <p>Test functionality after each step (D)</p> Signup and view all the answers

    What should the CSS class for Mat-Card include to style the card properly?

    <p>A background-image and background-size (C)</p> Signup and view all the answers

    What image folder should personal images be placed in for the Angular app?

    <p>public/images (A)</p> Signup and view all the answers

    What must be copied from the servicesApp.txt file into the card0# CSS files?

    <p>Only the classes (D)</p> Signup and view all the answers

    Which structural element is recommended to be included within app.component.html?

    <p>An Angular Material Card Layout (D)</p> Signup and view all the answers

    What is a necessary step when updating card01 html?

    <p>Include personal information (B)</p> Signup and view all the answers

    What might be required if cards do not display side-by-side?

    <p>Stopping and re-serving the application (A)</p> Signup and view all the answers

    In which location is Sheridan College Davis Campus found?

    <p>Brampton, ON Canada (D)</p> Signup and view all the answers

    What is the purpose of property binding in Angular?

    <p>To bind data to HTML elements based on conditions or boolean values. (D)</p> Signup and view all the answers

    What does the clearLogin function achieve when the button is clicked?

    <p>It clears the input field for the login. (D)</p> Signup and view all the answers

    How can the ngIf directive be used effectively?

    <p>To add or remove elements based on conditions. (B)</p> Signup and view all the answers

    What is the correct syntax for applying ngClass in Angular?

    <p>[ngClass] = '{ className: condition }' (C)</p> Signup and view all the answers

    In the provided content, how is two-way data binding achieved?

    <p>By using the [(ngModel)] directive. (D)</p> Signup and view all the answers

    Which directive is utilized to repeat an action on a specific HTML element?

    <p>*ngFor (C)</p> Signup and view all the answers

    What does the pipe (|) operator do in an *ngIf statement?

    <p>It transforms input from one type to another. (C)</p> Signup and view all the answers

    What happens to the button when the input box is empty?

    <p>The button is disabled. (A)</p> Signup and view all the answers

    What type of data can property binding handle in Angular?

    <p>Strings, numbers, or boolean values based on conditions. (D)</p> Signup and view all the answers

    Which of the following statements is correct regarding Angular Material components?

    <p>They provide additional functionality and styling options. (C)</p> Signup and view all the answers

    Which property is set to 'true' in order to disable user interaction with a checkbox?

    <p>[disabled] (D)</p> Signup and view all the answers

    What does the view show if the input for city matches the hard-coded value?

    <p>This city has a Sheridan Campus. (C)</p> Signup and view all the answers

    What is the main purpose of Angular directives?

    <p>To manipulate the DOM by adding behavior to elements. (B)</p> Signup and view all the answers

    Study Notes

    Angular Directives & More Material

    Data Binding = Communication

    • String interpolation {{ }}
    • 2-way binding
    • Property binding ([property] = "data")
    • Event binding

    2-Way Binding

    • Data flows from component data => screen then back to component data
    • 2-way binding syntax: [(ngModel)]
    • FormsModule must be included in app.module.ts to use <input>
    • Traditional JavaScript for 2-way binding (not to be included in our app):
      • HTML: <p id="myLabel"></p> <input type=”text” id=”myTextBox” onchange="update()"/>
      • JavaScript: function update(){var newValue = document.getElementById("myTextBox").value; document.getElementById("myLabel").innerHTML = newValue;}

    Directives01 Component

    • Include the following in the component .ts file
      • Create a new variable: loginCheck : string = 'Your login';
      • NOTE: Later we will update this to use shared data for value
    • Include the following in the component .html file
      • Include a header: "2-Way Data Binding"
      • Include a paragraph that displays a label and {{loginCheck}} <p>Input Login: {{loginCheck}}</p>
      • Include an Angular Material input field that ties loginCheck variable to input box: <label><input matInput [(ngModel)] = "loginCheck"></label><hr>

    Property Binding

    • We can bind to element properties using Property Binding
    • Add a <button mat-raised-button color="primary">Reset Login</button> under <hr> after input box
    • We want the button to be active ONLY if the input box is blank so we will be binding to the disabled property.
    • <button mat-raised-button [disabled] = "loginCheck === ''" >Reset Login</button>
    • This is referred to as property binding; normally you would not set the property to a static value (e.g., [disabled] = "true") but to a condition or external value that matches the property data type (e.g., disabled is either true or false, or need to be a string).

    Conditional Directives

    • Setup: Go to the directives02 HTML file
    • Include a variable called 'city' set to 'Brampton' (hard-coded)
    • Copy the heading + paragraph + input box (using 2-way binding to city) to this file
    • <h3>More Directives</h3>
    • <p><strong>Current City: {{city}</strong> / <em>Change City to see if it has a Sheridan Campus: </em><input matInput type="text" [(ngModel)]="city"></p>

    Conditional Directive Example

    • Check multiple cities against input entry
      • <p *ngIf='(city | lowercase) === "brampton" || (city | lowercase) === "oakville"'>This city has a Sheridan Campus<p>
      • Capitalization doesn't matter for this example due to lowercasing
      • <p *ngIf='(city | lowercase) !== "brampton" && (city | lowercase) !== "oakville"'>No Sheridan Campus</p>

    ngClass

    • Instead of using [ngStyle], this directive is used to bind to a CSS class.
    • Example using lowercase:
    • This city has a Sheridan campus<p>
    • <p *ngIf='(city | lowercase) === "brampton"'>This city has a Sheridan campus<p> This city has a Sheridan campus

      `

    Repeater Directive

    • is a container for
    • Use *ngFor to list all courses in the courseList array for the element.
    • ` <mat-list-item *ngFor='let x of courseList'>Code: {{x.ccode}} / Name: {{x.cname}} / Credits: {{x.credits}}

    Angular Basic JSON Retrieval

    • Follow directions to create a new app (jsonApp)
    • Ensure Angular Material is included
    • Add a header to include "JSON Examples" and use Angular styling for background/text colors and alignment
    • Add an Angular Material Tabbed Layout after the header

    Angular & JSON (Startup)

    • Create a data folder in the assets folder
    • Copy cp.json into assets/data (found in jsonIntro.zip).
    • JSON data (partial):
    • We will look at retrieving the first part of the JSON file for the header and use the courses array to populate class information.

    Angular & JSON

    • Create two components: jsonTable and jsonSelect
    • The jsonTable component's selector should be checked (e.g. app-json-table)
    • Open app.component.html and create two tabs in the mat-tab-group
    • Add 'Table of Courses from JSON' text to first tab label; use the 'Select Term' label with an icon for the second tab
    • Copy the into app.component.html and styles.css if Google Icons used

    Angular & JSON (Interfaces)

    • Instead of class, interface is used to layout JSON contents
    • Interface describes related properties and methods as an object; only for type checking; does not generate source code
    • Create new file called interfaceCP.ts
    • Add interfaces for program and courses

    Angular & JSON (.ts & .html)

    • Import the Courses and Program interfaces
    • Import data from cpdata
    • Declare variables to hold data for passing to children (e.g., program: Program = cpdata.ProgramData).
    • Share both variables to both new components

    Angular Applications

    • Angular applications are Single Page Applications
    • Use Angular Routing
    • Show either Davis or Trafalgar card
    • Setup routing by following steps

    Angular Routing: app.module.ts

    • Step 1: Add Routing functionality.
    • Step 2: Define routes.
    • Step 3: Register the routes with the Angular app.
      • AppRoutes: array of routes, each with path and component. Example with Davis and Trafalgar Components:
    const appRoutes: Routes = [
{path: '', component: DavisComponent},
{path: 'davis', component: DavisComponent},
{path: 'trafalgar', component: TrafalgarComponent}
];

    Angular Routing: app.component.html

    • Remove component calls for 'davis' and 'trafalgar'

    Angular Routing: header.component.html

    • Include a call to specific card to display using routerLink example <a routerLink="/davis"> <button color="accent">Davis Campus</button> </a>

    Services Review

    • Call a service for the selected card when clicked
    • Update the button beside the image in each card

    Services Review (Continued)

    • Include imports
    • Add constructor
    • Create a function and call the service with the campus name

    Angular (Material) Dialog Popup

    • Use dialogs instead of alert boxes
    • Create a new component using ng g c popup-info
    • Add a constructor
    • Create a method to open the dialog
    • Setup accepting data from the service
    • Copy the HTML to output
    • Include elements such as title, content, actions, and a footer

    Angular HTML Forms

    • Follow directions to create a new app (formsApp)
    • Create 3 components: header, template-forms, reactive-forms.
    • Include header in app component.

    HTML Form Approaches

    • Because Angular is single page, form setup and validation are done in Angular.
    • There are 2 approaches to working with forms in Angular:
    • Template-driven approach (for simple forms) HTML form is created and Angular infers structure
    • Reactive approach (for complex forms) structure of form is defined in code

    Template Driven Forms

    • Import FormsModule
    • Use <form> to tell angular to create the template once field controls are registered.
    • Do NOT include 'action' or 'method' in <form> tag
    • Use NgModel to tell angular which fields are controls. [ngModel]="fieldName" [(ngModel)]="fieldName"
    • Build form with mat-input, and other form elements. To apply structural properties include 'name' in your controls. input matInput id="fieldName" ngModel name="fieldName">

    Reactive Forms

    • TypeScript defines the structure
    • Copy structure from formsApp.txt
    • Import necessary modules

    Reactive Forms (.ts file)

    • Create the form group in the ngOnInit() life cycle hook
    ngOnInit() {
this.sheridanForm = new FormGroup({
idnumber: new FormControl(null),
login: new FormControl(null),
campus: new FormControl('Davis')
})
}

    Reactive Forms (html file)

    • Use formControlName='fieldName' for each field to bind. ex <input matInput formControlName="idnumber">
    • Use the instance of NgForm to access the FormGroup via local template reference #f="ngForm" and then you can access the form's instance using the 'f' variable in the TypeScript file

    Validators

    • Validate form data using Angular Validators.
    • Include relevant validators (ex. required) in the FormControl.

    Angular HTTP

    • Use the HttpClient to access external data
    • HttpClient service instance must be injected
    • A service object http is created as a class variable to access the HTTP functionality
    • The example data is retrieved and displayed

    Retrieving Local/Remote JSON Files

    • Use http.get( ) to retrieve JSON from a URL and update variables from the result
    • Get the data and display it in a tabular format (mat-list)

    Setting default values

    • Set default values for variables from a select drop down box
    • In the ngOnInit() function, call one or more functions, providing parameters where needed, to retrieve data and store it in suitable variables.
    • Include the from the template.
    • Use the fetched data in the mat-grid-list

    Studying That Suits You

    Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

    Quiz Team

    Related Documents

    Angular Directives & More Material PDF

    More Like This

    Untitled Quiz
    37 questions

    Untitled Quiz

    WellReceivedSquirrel7948 avatar
    WellReceivedSquirrel7948
    Untitled Quiz
    55 questions

    Untitled Quiz

    StatuesquePrimrose avatar
    StatuesquePrimrose
    Untitled Quiz
    18 questions

    Untitled Quiz

    RighteousIguana avatar
    RighteousIguana
    Untitled Quiz
    50 questions

    Untitled Quiz

    JoyousSulfur avatar
    JoyousSulfur
    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser