• 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 assignment, 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 assignment 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).
15 freelancere byder i gennemsnit $29 på dette job
hey how are you need asp.net mvc or [login to view URL] core developer em here for your assistant please ping me to discuss more on this and for front end #React js #angular js #angular
Hello, I have been working in IT industry more than 7 years and I have an experience in angular.js,react.js,and angular. I hope I will meet your expectation.
Hi, I've 1.8 years of experience in Angular and Node JS. I think ill be a good fit for this role as im looking for jobs mentioned above. Also my budget is minimal.
I'm current working with this tecnology as a full stack developer for a exchange brokerage. already create a lot of components that is used to quickly fix wrong or incorrect exchange and make sure data is ok.
Hello I am a frontend developer with advanced knowledge of Angular and can complete your project in maximum 2 days including full testing. Looking forward to hear from you soon.