SYST24444 Rev XXXXXXXXXXSong Ho Ahn 1 Assignment 4: Angular Tutorial Videos Description Write an Angular application to load the list of 5 Angular tutorial videos from a local JSON file, and to...

1 answer below »

SYST24444 Rev XXXXXXXXXXSong Ho Ahn
1

Assignment 4: Angular Tutorial Videos

Description
Write an Angular application to load the list of 5 Angular tutorial videos from a local JSON file, and to display the list
using Angular Material Card component.

You must create a JSON file containing the tutorials about Angular Framework. You also need extract other
information such as the video thumbnails and channel icons from the YouTube pages.
1. Video Title
2. Channel Name
3. Video URL
4. Thumbnail URL
5. Channel Icon URL
Example:
1. Video Title: Angular Tutorial for Beginners: Learn Angular & TypeScript
2. Channel Name: Programming with Mosh
3. URL: https:
www.youtube.com/embed/k5E2AVpwsko
4. Thumbnail URL: https:
img.youtube.com/vi/k5E2AVpwsko/0.jpg
5. Channel Icon URL: https:
yt3.ggpht.com/a/AATXAJymy6xr9_W7GTkPW1ov2OyxzvNCOE-ff1d7VK36Cg=s100-c-k-c0xffffffff-no-rj-mo
MatCardModule
mat-card-image
mat-card-title
mat-card-subtitle
mat-card-actions
mat-card-avatar
https:
www.youtube.com/embed/k5E2AVpwsko
https:
img.youtube.com/vi/k5E2AVpwsko/0.jpg
https:
yt3.ggpht.com/a/AATXAJymy6xr9_W7GTkPW1ov2OyxzvNCOE-ff1d7VK36Cg=s100-c-k-c0xffffffff-no-rj-mo
SYST24444 Rev XXXXXXXXXXSong Ho Ahn
2

Requirements
• Must create a valid JSON file with proper data structure
• Must use Angular framework
• Must use Angular Material Card and Button modules for each video information (title, channel, URL,
thumbnail URL and channel icon URL)
• Must use HttpClient module load JSON file
• Must be responsive layout; each card must be equal size and dynamically resized based on device width
• Must use proper data/event bindings and directives (*ngFor)
• Must open the video when “WATCH” button is clicked

References
Note 08~12 and Lab08~12

Deliverables
An archive file, Assignment4_.zip, which contains your project distribution folder under dist
subdirectory. It should be runnable on any system after download it;
ng build --base-href ./ --configuration development
NOTE: You must include the file header at the beginning of each file. The header must contain a short description,
your name, email, date, etc.

Submission and Due Date
Submit your deliverables to SLATE/Assignments/Assignment4 by Thursday, Apr. 14, 11:59 PM.
You may submit multiple versions, but only the latest version will be evaluated.
NOTE: Late submission will be deducted 10% per day. (max. 3 days)
NOTE: Partial implementation will be accepted.
NOTE: This assignment is individual work and subject to Sheridan Academic Integrity Policy.

Evaluation (Total 100 points)
Task 1: JSON file (20 points)
1. Implement videos_.json
a. Include 5 video information about Angular tutorials
. Each video has 5 properties; title, channel, url, thumbnailUrl and avatarUrl
c. Store it src/assets folder in your project
d. Validate JSON format, e.g. https:
jsonlint.com/
NOTE: The URL structure of YouTube thumbnail is;
https:
img.youtube.com/vi
videoID
0.jpg
NOTE: You can get the direct URL of the channel icon (avatarUrl) by right-click on the image.
Task 2: Template & CSS (40 points)
1. Implement app.component.html
e. Heading for the title, “Angular Tutorials”
f. Use for each video information
g. Use *ngFor directive to iterate 5 videos
h. Use [src] property binding for thumbnail image
i. Use [ngStyle] directive for mat-card-avatar element
HINT: Please check https:
material.angular.io/components/card/examples
j. Use “click” event binding for the button of
k. Use string interpolations for and
https:
material.angular.io/components/card/examples
SYST24444 Rev XXXXXXXXXXSong Ho Ahn
3


2. Implement app.component.css and/or styles.css
a. All cards must be same width and height
. Use full device width
c. Dynamically resize and wrap the contents while the device width changes
HINT: Use “display:grid” layout and “grid-template-columns:repeat(auto-fill, minmax(200px,1fr))”
d. Space each card item evenly using “gap” style

Task 3: app.component.ts (40 points)
1. Define videos a
ay property to hold the JSON data
2. Use HttpClient service to load the local JSON file
3. Fetch JSON data in the constructor. If success, assign the JSON data to “videos” property. Otherwise, print
the e
or message and assign an empty a
ay instead.
HINT: HttpClient.get(URL).subscribe({next:successCB, e
or:e
orCB})
4. Define openVideo(index) member function to open a new ta
page with the target youTube URL. This
function is called when the action button of the card is clicked, and it passed the index of the “videos” a
ay.
HINT: Use window.open(url, “_blank”) to open a new window
5. Define getAvatarUrl(index) member function to return the URL of the channel’s icon. The index parameter is
the index value of “videos” a
ay. You may return a default avatar icon if it cannot find one. (It is available at
SLATE/Assignments/Assignment4 folder.


Bonus (20 points max)
• Add 5 additional videos into the JSON file (5 points)
• Use other Angular Material components or other information in the cards (10 points)
• Add additional features to enhance your application (5 points)

Q & A (Extra Notes)
Q1. How to use Angular Material Card component?
mat-card-title>
mat-card-subtitle>
mat-card-actions>
img mat-card-image>
div mat-card-avata

mat-card>
mat-card-heade

utton mat-raised-button>
SYST24444 Rev XXXXXXXXXXSong Ho Ahn
4


!-- material card -->
mat-card

src=" https:
img.youtube.com/vi/k5E2AVpwsko/0.jpg">



div>

TITLE
mat-card-title>

SUBTITLE
mat-card-subtitle>

mat-card-heade



utton mat-raised-button color="primary">WATCH
utton>

mat-card-actions
mat-card>

Q2. How to resize the cards dynamically (Responsive design)?
Use grid layout with minmax().

!-- wrap the card with a grid
in app.component.html -->
div >
mat-card>...
mat-card>
div
* in app.component.css */
* wrapper for cards */
.gridblock {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap:10px;
}
* channel icon */
.channel-icon {
background-image: url("assets/defaultAvatar.png");
background-size: cover;
}
Q3. How to bind properties, events and styles?
A1: Property Bindings
img mat-card-image [src]="..."
div mat-card-avatar >

A2: Event Binding
utton (click)="...">

The expression must be
url(‘URL for each channel icon’)
Range from 250px to 1 fraction
SYST24444 Rev XXXXXXXXXXSong Ho Ahn
5
Q4. How to pass the a
ay index from template to component?
Use the built-in variable “index” in *ngFor directive
div *ngFor="let video of videos; let i = index">
...
{{video.title}}
div>
...

utton (click)="myFunc(i)">Click Me!
div>
...
div
Q5. How to include Logger.js to an Angular project?
STEP1: Add Logger.js file to src/assets/ folder
STEP2: Modify angular.json file
"projects": {
"assignment4": {
...
"scripts": [ "src/assets/Logger.js" ]
STEP3: Declare the class and function names in src/app/app.component.ts before the class definition
declare let Logger : any
declare let log : any

Answered 10 days AfterApr 04, 2022

Solution

Manikandan answered on Apr 14 2022
11 Votes
SOLUTION.PDF

Answer To This Question Is Available To Download

Related Questions & Answers

More Questions »

Submit New Assignment

Copy and Paste Your Assignment Here