•Create a new Angular project called yourLoginNameA3 -- 2

• 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).

Habilidades: AngularJS, HTML5, Node.js, Mobile App Development, jQuery / Prototype

Veja mais: visual studio 2005 create windows mobile project, create banners web project, create module access project, run angular app locally, create angular 8 project, how to create component in angular 7, hero editor angular, angular 8 list example, dynamic list in angular 6, angular 6 list view, start angular project, create access data project 2007, need project called hotel reservation system developed j2ee, create table name project, create mirror site project, create sharepoint web project, create intranet company project, create flash animation project, create multimedia database project, create package rpm project

Acerca do Empregador:
( 15 comentários ) Brampton, Canada

ID do Projeto: #26782067

14 freelancers are bidding on average $28 for this job

(24 Comentários)

Greetings. I have completed your requirement in Angular. You can preview using the below URL. [login to view URL] If you need any modification, you shall let me know. I will m Mais

$15 CAD em 1 dia
(3 Comentários)

Hello! Could you send me the PDF with details? I am a full-stack web developeMagento, Javascript, jQuery, HTML5, CSS, Joomla, Prestashop, Opencart, Drupal, Magento, React.js, React Native, mobile development ect. I a Mais

$30 CAD in 7 dias
(1 Comentário)

hello I have 3+ years of experience in nodejs and Angular I read carefully your project description you want angur and nodejs setup for student and book section I can create a well settled demo for your project in node Mais

$30 CAD in 2 dias
(6 Comentários)

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

$20 CAD in 7 dias
(4 Comentários)

Hi This is my first project I have 7+ exp in java along PHP. Andorid,webService SQL,ReactJs,xml,xslt,MicroService Restful spring and css,,sql Angualr support,android,Restful Service hand on exp in Mnc company --------- Mais

$10 CAD in 2 dias
(1 Comentário)

Hi, Dear. (✿ *‿* ✿) Thanks for reading in my proposal. Very interested to work on your project. While doing many large and small projects, I have gained depth knowledge and rich experience with Website development usin Mais

$50 CAD in 2 dias
(1 Comentário)

Hi, I am a software engineer having 2.6 years of experience working in Design and Development of Web Application using JAVA and its framework and Angular and Node js. Looking on the description of the work, its very Mais

$20 CAD in 7 dias
(0 Comentários)

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.

$30 CAD in 4 dias
(0 Comentários)

Hi Client, I have read your description and I can make the same project while going through your description. I have a 2+ year experience in Angular, Html, css, javascript, jQuery, Bootstrap and media queries. Pleas Mais

$30 CAD in 7 dias
(0 Comentários)

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.

$25 CAD in 7 dias
(0 Comentários)

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.

$20 CAD in 7 dias
(0 Comentários)

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.

$25 CAD in 2 dias
(0 Comentários)

Hey ! I am new to freelancer and very interested to do this project. I have bachelors Degree in CS from Pakistan's top rank University and 2 years of professional experience of Angular(also have hands-on experience of Mais

$50 CAD in 2 dias
(0 Comentários)