Untitled Quiz

Angular Directives & More Material

• Some information taken from https://angular.dev/

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