Answered step by step
Verified Expert Solution
Question
1 Approved Answer
Objective: This assignment aims to introduce students to the basics of Angular, including project setup, component creation, and basic data binding. Instructions: 1 . Setup
Objective: This assignment aims to introduce students to the basics of Angular, including project setup, component creation, and basic data binding. Instructions: Setup and Installation: Install Node.js and Angular CLI if not already installed. Create a new Angular project named yournameassignment using Angular CLI. Project Structure: Familiarize yourself with the generated project structure. Understand the purpose of key files and folders. Create Components: Create the following components: header: For the sites header. footer: For the sites footer. home: For the home page content. testimonials: For displaying user testimonials. includetestimonial: For including new testimonials child component App Component: In the app.component.html set up a basic layout that includes the header, a router outlet, and the footer. Routing: Configure routing for the home and testimonials components. Set the home component as the default route. Home Component: In the home component, include the following: A welcome heading. A brief description of the application. A section where you describe yourself, including: Your skills Projects you have worked on Your aims Your hobbies Your image. Navigation links to the testimonials page. Testimonials Component: In the testimonials component, display some dummy testimonials. Include an input box for the user to enter their name and an "Add Testimonial" button. On clicking the "Add Testimonial" button, the name from the input box should be passed to the includetestimonial child component and make it visible. Display a text box for the user to write their testimonial and a submit button. In the includetestimonial component, display a thank you message such as "Thank you, John, for giving a testimonial." On submitting the testimonial, pass the testimonial information back to the parent testimonials component and display it there. Styling: Add basic styles to your application to ensure it looks clean and organized. You can use CSS or Angulars builtin styling solutions. Data Binding: Demonstrate both interpolation and property binding in your components, especially in the home and testimonials components. Submission: Run your Angular application and take screenshots of the following: The home page. The testimonials page showing added testimonials. Submit a docx file containing the screenshots along with the source code of your Angular components and the routing module.
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started