• Create a header component and a footer component
Format both header and footer components (tags to be used; ex. h1 and h3) to the same formatting in regard to background and text colour plus any other formatting of your choice; You can format each .css for header and footer or use the [login to view URL] to create global styles for your tags
• Create a file in the app folder called [login to view URL] in the app folder. In this file, create a class called YourLoginName that includes the following definition with your choice of label and type (see [login to view URL] file in our in-class example as a reference):
Your student number, your name, your login name, your campus, and assignment title
In both the header and footer component .ts files, import and create a variable to fill in the class data with your information.
Note: For this task, you will duplicate the data in the header and footer components; we will learn later how to set it once and use in multiple components
In the header component html file, use string interpolation from your personal class data to display task title / your name in an HTML header tag (not hard-coded).
In the footer component html file, use string interpolation from your personal class data to display your name / your student number / your login name / your campus in an HTML header tag (not hard-coded)
Note: You may need to stop the node server and start up again after creating a class. Use Ctrl+C to terminate batch job then "ng serve" again after class file is created.
• Be sure to update your [login to view URL] with the components you want to display
• Create another .ts (example: [login to view URL]) file in your app folder to hold another class for books that will include the following definition (your choice of file name and class name):
book name / author / genre / year published / picture
• Create a data file (hard-coded) called myBooks.ts. Create data for 4 of your favourite books with the data from the class created (use [login to view URL] in our in-class exercise for reference)
Note: Pictures will need to be included in the images folder created for the default setup. The picture itself can be anything you want.
• Create a component called detail. Create a structure using a grid-area that include a navigation section that goes across the screen with 2 areas (one on the left and one on the right) under the navigation section. One side will hold a picture and the other will hold book details. For Portrait mode, display all sections vertically (Navigation on top of picture on top of book details)
• Be sure to import your book data into the [login to view URL] and setup a variable to hold the data (see [login to view URL] in our in-class project for reference)
• In the [login to view URL], setup a directive (*ngFor) to create 4 buttons for the 4 books in the nav section; be sure to include an index so you can capture which is selected so you can display detail data and the picture from the data file based on the button clicked; also be sure to include a (click) event to call a function to find correct book data.
• Note: Use *ngFor not only with list items (as we did in our in-class exercise) but also with buttons or any other HTML tag (NO hard-coding).
8 freelancers are bidding on average $37 for this job
Hello sir, I am a 5 year experienced full stack developer having expertise in java, spring boot, spring MVC, hibernate, angular 2,4,5,6,7,8, reactjs. I can do it. Please hire me.