To develop a Mobile Web Site using Angular framework.

$$ Please create a new standalone Angular project and name it

Midterm.

$$ Please generate the following elements within the project:

o Define a Class named Monitor with the following properties: model

$($string$),$ brand $($string$),$ resolution $($number$),$ size $($number$),$ year

$($number$),$ manufacturer $($string$),$ unitsSold $($number$),$ and inventory

$($number$).$

o Save the Class in a file named monitor.ts$.$

o Generate a JSON file named monitorData.json in the assets$/$data folder

to represent monitor data. Ensure that the data structure aligns with

the Monitor class and include at least three objects in the file.

o Generate three components $$ monitorData, monitorDetails, and

monitorStats.

$$ The monitorData component will perform the following tasks:

o Import the Monitor class and the monitor data.

o Share the data with the root component.

$$ The Root component will perform the following tasks:

o Retrieve the data sent by the monitorData component.

o Include the selectors for both the monitorDetails and monitorStats

components in the template.

o Set up an Angular Material Tab Group structure with two tabs$,$ each

corresponding to one component.

o Pass the following properties of the monitor objects to the

monitorDetails component: model, brand, resolution, size, and year.

o Pass the following properties of the monitor objects to the

monitorStats components: model, brand, manufacturer, unitsSold, and

inventory.

$$ The monitorDetails component will perform the following tasks:

o Retrieve the data sent by the root component and display it as a list.

o Apply a red color to the listing using $[$ngStyle$].$

SYST$24444$ Mobile Web$-$Based Application Development

Midterm Exam

Page $2$

$$ The monitorStats component will perform the following tasks:

o Retrieve the data sent by the root component and display it as a list.

o Apply an orange color to the list using $[$ngStyle$]$