Angular Directives & More Material PDF

Angular Directives & More Material NOTE: Some information taken from https://angular.dev/  Data Binding = Communication String interpolation {{ }} Data Binding 2-way binding & Directives Property binding (...

Angular Directives & More Material NOTE: Some information taken from https://angular.dev/  Data Binding = Communication String interpolation {{ }} Data Binding 2-way binding & Directives Property binding ([property] = "data") Event binding SYST24444 Mobile Web Slide 5  O Data flows from component data => screen then back to => component data O 2-way binding syntax: [(ngModel)] O (FormsModule must be included in app.module.ts to use ) O Traditional JavaScript for 2-way binding (not to be included in our app): 2-way HTML: Binding JavaScript: function update(){ var newValue = document.getElementById("myTextBox").value; document.getElementById("myLabel").innerHTML = newValue; SYST24444 Mobile Web Slide 6  O In directives01 component O Include the following in the component.ts file O Create a new variable: loginCheck : string = 'Your login'; O NOTE: Later we will update this to use shared data for value O Include the following in the component.html file 2-way O Include a header: "2-Way Data Binding" Binding O Include a paragraph that displays a label and {{loginCheck}} Input Login: {{loginCheck}} O Include an Angular Material input field that ties loginCheck variable to input box: SYST24444 Mobile Web Slide 7  O Adding Angular Buttons (Review following link for options): https://material.angular.io/components/button/overview O We can bind to element properties using Property Binding O Add a Reset Login under after input box O We want the button to be active ONLY if the input box is blank so we will be Property binding to the disabled property; change to the following: Reset Login O This is referred to as property binding; normally you would not set the property to a static value (ex. [disabled] = "true") but to a condition or external value that matches the property data type (ex. disabled is either true or false but another property such as src would need to be a string value) O For example, in the next topic (Event Binding), the property will be set based on the outcome of a function (event) call SYST24444 Mobile Web Slide 8  O We now want to set the button to run a function when the button is clicked: Reset Login Event O Instead of onClick = "" you enter the event in () within the element (click); This is event binding Binding O Go to the component.ts file and add the function: clearLogin() { this.loginCheck = ""; } O The button will be enabled for the click event when the input box contains text but will be disabled when empty SYST24444 Mobile Web Slide 9  O Property binding example using mat-checkbox : O Include a header element: "Checkbox Example" O Include a section element and use Angular Styling to include a border around section contents O Create 2 Angular Check Boxes (mat-checkbox) O My Login Name Other Login Name Property O For the first checkbox, use property binding for the [checked] property to 'check' the box if the input box contents (loginCheck) is equal to your personal Binding O For the second checkbox, use property binding for the [checked] property to 'check' the box if the input box contents (loginCheck) is NOT equal (!=) to your personal login O Set [disabled] property to 'true' so user cannot check boxes manually SYST24444 Mobile Web Slide 10  Conditional Directives are used to add or remove an element In this class we will use a combination of *ngIf and ng-template (called an Angular Template) which are tied to each other with an ID Sample Syntax: … … O Setup: Go to the directives02 HTML file Conditional O Similar to directives01, include a variable called city that is set to 'Brampton' (hard-coded) Directive O Copy the heading plus paragraph and input box that uses 2-way binding to city to this file More Directives Current City: {{city}} / Change City to see if it has a Sheridan Campus: SYST24444 Mobile Web Slide 11  Example for our application; Check multiple cities against input entry: This city has a Sheridan Campus No Sheridan Campus O Since users might enter a city in any mixture of case, we add piping (|) such as uppercase (or lowercase) to *ngIf statement; parens () MUST be used: Conditional This city has a Sheridan Campus No Sheridan Campus SYST24444 Mobile Web Slide 12  Instead of using [ngStyle] to bind to a single property or multiple style properties, we can use [ngClass] to bind to a CSS class based on class name [ngClass] = "{KEY: conditions}" This city has a Sheridan campus ngClass No Sheridan Campus In CSS:.neither {background-color: teal; color: white;}.oak {background-color: navy; color: yellow;}.br {background-color: navy; color: pink;} SYST24444 Mobile Web Slide 13  Open directives.txt from SLATE: 0 Copy class and courseList data where indicated 0 Create a new variable called cdate and set to the current system date O Go to the directives02 HTML file O is a container for O Include a and use an *ngFor to list all courses in the courseList array for the Repeater O *ngFor is used to repeat an action on a specific HTML element Directive Code: {{x.ccode}} / Name: {{x.cname}} / Credits: {{x.credits}} SYST24444 Mobile Web Slide 14  Angular Basic JSON Retrieval More Directives and Material NOTE: Some information taken from https://angular.io/  Follow directions to create a new app jsonApp Be sure the app is created and Angular Material included  Add a header in app component html: "JSON Examples" Startup  Use Angular Styling ([ngStyle]) to change the background and text colours and align to the center  Add an Angular Material Tabbed Layout after header element in app.component.html  Common_Angular_Material_Structures_And_Options document from References Module in SLATE Slide 2  O Create a data folder in the assets folder O Copy cp.json into the assets/data folder (located in jsonIntro.zip) O JSON Data (partial): { "ProgramData" : { "programName": "Computer Programming", "shortName": "CP", Angular "schedule": "16-months/4 terms", & "credential": "2 year Diploma" JSON }, "courses": [ {"term": 1, "class": "PROG12583", "credit": 6, " description" : "Prog Foundations-Python" }, {"term": 1, "class": "SYST10049", "credit": 3, " description" : "Web Development" }, … O We will look at retrieving the first part of the JSON file for our header then use the courses array list to populate class information SYST24444 Mobile Web Slide 3  O Create two (2) component called jsonTable and jsonSelect: O Open json-table.component.ts and note the selector: O The jsonTable component that was generated has been altered from camel case to spacing using - (app-json-table). Always check the selector if you are not 100% sure of the proper name Angular & O Open app.component.html create 2 tabs within mat-tab-group JSON and add the above components WITHIN the tabs O For first mat-tab, just include text in the tab label: O Table of Courses from JSON O For the second mat-tab, include text and an icon for the tab label: O Select Term O NOTE: Copy the included in the AngularMaterial.txt into the app.component.html and the class into styles.css if Google Icons used SYST24444 Mobile Web Slide 4  O Instead of using a Class, an Interface is used to layout the JSON contents O Class - blueprint we use to create objects that share the same properties and methods; can be used for type-checking and in Angular the implementation & JSON O Interface - group of related properties and methods that describe an object; virtual structure within TypeScript; solely used for type-checking purposes; does not generate any source code O An Interface is created the same way as a class…by adding a file with a.ts extension SYST24444 Mobile Web Slide 5  O Create a New File called interfaceCP.ts in the app folder. O One option is to create 2 interfaces…one for the program information and one for the course lists. These virtual structures must be planned based on the JSON file structure: export interface Program { programName: string; shortName: string; schedule: string; credential: string; } Angular export interface Courses { term: number; class: string; credit: number; description: string; } & JSON O In tsconfig.json O AFTER "lib": [] Add the following (included in jsonApp.txt) , "resolveJsonModule": true, ""allowSyntheticDefaultImports" : true O After this step, stop serving (Ctrl + C in terminal/node) then re-serve (ng serve); Refresh your browser SYST24444 Mobile Web Slide 6  O In app.component.ts: import {Courses, Program} from './interfaceCP'; import cpdata from '../assets/data/cp.json'; Angular & 0 Declare variables to hold data that will be used to pass data to JSON child: program: Program = cpdata.ProgramData; courses: Courses[] = cpdata.courses; 0 Share both variables to both new components SYST24444 Mobile Web Slide 7  One last step…as completed, when first selecting the tab, you must select a term for a table to show. Best practice is to have an initial display so we need to load a default (in this case we will load term 1) First, we need to talk about LifeCycle hooks in Angular Angular https://angular.io/guide/lifecycle-hooks & JSON Every component in Angular has a lifecycle (sequence of stages that a component goes through during its lifespan). Angular includes lifecycle hooks so you can include actions during those times. We are only going to look at 1 hook for now: ngOnInit() – only called once when the component is created We can create the termArray for Term 1 in this lifecycle hook so initially Term 1 table of courses is shown SYST24444 Mobile Web Slide 16  ngOnInit() { for (let x of this.courses) { // Check term against a hard-coded 1 if (x.term === 1) { this.termArray.push({"class": x.class, Angular & "credit": x.credit, JSON "description": x.description}); } } } Remember, as you build your app, check functionality after each step and do not move forward until all errors are corrected and functioning as required. SYST24444 Mobile Web Slide 17  Angular Dependency Injection Services NOTE: Some information taken from https://angular.dev/   Follow directions to create a new app servicesApp  Include 2 images representing yourself into the public/images folder  Add a that uses Angular Styling to create a flexbox layout in app.component.html  Create 2 components: card01 and card02 and include within the section Startup  Add an Angular Material Card Layout in each component.html  Common_Angular_Material_Structures_And_Options document from References Module in SLATE Slide 2   can include   The CSS class (an example class name included here) can contain a background-image and background-size: cover to create a small icon image Mat-Card  Layout discussion  can include any HTML will be done during  without a width will stretch image to card class width exercise   Buttons to call actions  SYST24444 Mobile Web Slide 3   Download servicesApp.zip from SLATE  From servicesApp.txt  Copy the classes (only) into BOTH card0# CSS files  Update CSS accordingly and change icon image for personal CSS Mat-Card Update  Copy the images into the public/images folder Content… will be done during  Update card02 html as shown on next page class  Update card01 html with your personal information to create separate exercise cards using the card02 html as a guide  Test until no errors and showing cards side-by-side  You may want to stop the serve and re-serve Slide 4  Sheridan College Davis Campus Mat-Card Update Sheridan College Davis Campus is located Content… in Brampton, ON Canada. It is the largest will be done campus and includes applied health, community services, engineering and during technology programs. class exercise