CodeBetter

Angular Front End Development

Syllabus, Assignments Questions

Section 1 - Angular

- Intro to Angular - Intro to Type Script - Data Types - Class & Objects - Access Modifiers & Constructors

S.No	Question
*1.	Create a class to calculate Area of circle with one data member to store the radius and another to store area value. Create method members a. init - to input radius from user b. calc - to calculate area c. display- to display area.
*2.	Create a class MathOperation with two data member X and Y to store the operand and third data member R to store result of operation. Create method members ● init - to input X and Y from user ● add - to add X and Y and store in R ● multiply - to multiply X and Y and store in R ● power - to calculate X Y and store in R ● display- to display Result R
*3.	Enter the marks of 5 students in Chemistry, Mathematics and Physics (each out of 100) using a structure named Marks having elements roll no., name, chem_marks, maths_marks and phy_marks and then display the percentage of each student.
*4.	Install Angular.
*5.	Create first App Hello World in Angular.
*6.	Addition of two number in Angular.
*7.	Print Student Data.

S.No	Question
#1.	Write a Program to create Book Details using class.
#2.	Write a Angular class named Rectangle constructed by a length and width and a method which will compute the area of a rectangle.
#3.	Write a program to store and print the roll no., name, age, address and marks of 15 students using class.
#4.	Write a structure to store the roll no., name, age (between 11 to 14) and address of students (more than 10). Store the information of the students.
#5.	Write a function to print the names of all the students having age 14.
#6.	Write another function to print the names of all the students having even roll no.
#7.	Write another function to display the details of the student whose roll no is given.
#8.	Basic Mathematics Operations (Subtraction, Multiplication, Division, Mode).
#9.	Print Employee Data.

Section 2 - Components, Expression , Directives Binding & Events

- What is Components & Types of Components. - How to Create a component & rendering. - Life Cycle of Components & styling in properties. - Parent Component & Child Component - Component Expression & Programs - Nesting Components - Directives ng-if and else condition, ngFor, ngSwitch, etc.. - Styling Element with ngStyle - Data binding - String Interpolation - Property Binding. - Difference between Property Binding and String Interpolation. - Binding Properties and Events. - Two Way binding. - Binding with Custom Events & Custom Properties. - Combine Forms with Data binding.

S.No	Question
*1.	When using + in an expression bound to text input, the operator will concatenate the strings (first example),displaying 55 on the screen.
*2.	When using + in an expression bound to number input, the operator return the sum of the numbers (second example), displaying 10 on the screen. Ex : <div ng-app="app" ng-controller="ctrl"> <input type="text" ng-model="textInput.value"> {{ textInput.value + 5 }} <input type="number" ng-model="numberInput.value"> {{ numberInput.value + 5 }} </div>
*3.	Print data from array using ngRepeat Ex1 : ng-repeat an array <ul> <li ng-repeat="item in itemCollection"> {{item.Name}} </li> </ul> Where: item = individual item in the collection itemCollection = The array you are iterating Ex2 : ng-repeat an object <ul> <li ng-repeat="(key, value) in myObject"> {{key}} : {{value}} </li> </ul> Where: key = the property name value = the value of the property myObject = the object you are iterating
*4.	Increment and Decrement Numeric State Value.
*5.	Create numeric state & Change it’s value on button click.
*6.	Create Dynamic Friend List with add and delete operation. All friends name show in unordered list. When user click on any list item show name in alert box.
*7.	Student Management Record Program with Full CRUD Operations. rollnumber , name , email , city , branch , physics , chemistry , maths Note : 1. Email and rollNumber not duplicate 2. RollNumber, name , Email, branch , physics , chemistry , maths are mandatory
*8.	Send Data from Parent Component to Child Component.
*9.	Send Data from Child Component to Parent Component.
*10.	Student Management Project.

S.No	Question
#1.	Student Marksheet Generate Program and take input 5 subject marks and print total marks , percentage and grade.
#2.	Create a Basic Calculator.
#3.	Create a slider with 10 images in javascript with next and previous button.
#4.	Create a Stopwatch.
#5.	Manage Multiple Students Exam Details with Props (individual exam data is a seperate component) : Exam Details : RollNumber , Name , Branch , Physics , Chemistry , Maths Operations : 1. Add Exam Details 2. Delete Exam 3. Filter Exam Records Via Branch ,Name and Roll Number.
#6.	Create three Component : - Salary Component in which user give input basic salary , bonus and incentive. - Deduction Component in which user give input deduction and tax. -Expenses Component in which user manage expenses details. - Expense Name - Expense Amount All these three component show into App Component. But whenever user change into any these three components reflection is show off in App Component. Information on Main Component : Gross Salary = (basic+bonus+incentive) Deduction = (deduction + tax) Expenses = (Total Expenses)

Section 3 - Pipes

- What is Pipes & How we Use. - Filter Pipe,Pure Pipe & Impure Pie

S.No	Question
*1.	Build a movie search application using Angular. Users should be able to search for movies by title and filter the results based on their release year and genre. Implement custom pipes to perform filtering and sorting operations on the movie list. Additionally, create a Pure Pipe to transform the movie durations from minutes to hours and minutes (e.g., 150 minutes to "2h 30m").
*2.	Develop a Todo List application using Angular. Each todo item should have a title, description, and tags. Users should be able to filter todos based on tags. Implement a custom Pure Pipe that allows users to search for todos containing specific keywords in their titles or descriptions. The search should update in real-time as the user types.

S.No	Question
#1.	Create a product inventory dashboard using Angular. The dashboard should display various product categories and their respective items. Implement custom pipes to calculate and display the total value of products in each category. Additionally, create an Impure Pipe that sorts the products within each category based on their popularity (e.g., number of views or purchases).
#2.	Build a real-time chat application using Angular and Firebase. Users can send and receive messages in different chat rooms. Implement a custom Pipe to format timestamps for each message, showing either the time or date, depending on the message's age (e.g., "11:30 AM" for recent messages and "Jan 25, 2023" for older messages).

Section 4 - Routing & Template Integration

- What is Routing, loading, and navigation. - Styling of Router Link & Relative Path Navigation. - Template Integration

S.No	Question
*1.	Create Multiple Component and route all components via Menu Bar.
*2.	Template Integrate via download from google. Integrate these Templates : onix-digital> dicet-tv pet-shop medinova

S.No	Question
#1.	Create Photo Gallery with add and delete images via Component.
#2.	Create To-Do List Program.

Section 5 - Forms, Service & Http Modules

- Create Login & Register Form(input fields,Check Box ,RadioButton, etc…) - ngForms, Use & Submit form - Validation & Print Error Message - What is Services, Injection - Create Data Service (Service Binding) - service in Cross Component - HTTP Requests & How to Send Requests - How to Handle GET,POST,PUT and Delete Method - Rest API & JSON Parsing - What is Authentication & Working - How to Handle GET, POST, PUT and Delete Method - Introduction to JSON Web Tokens.

S.No	Question
*1.	Insert User Data (POST) Api.
*2.	Show User Data (GET) Api in Table.
*3.	Update & Delete

S.No	Question
#1.	Use this Api : DummyJson User Api 1. Show Data in Table in sorted order via age by default 2. Manually change the Sorting via gender, blood group, weight, firstname
#2.	Use this Api : DummyJson Products Api Show Response Data in UI via Child Component

Section 6 - Project : E-Commerce App:

- Implement Emall Api and create user panel with Registeration , Login , Cart and Purchase functionality. - JWT Token Introduction and Implementation.

S.No	Question
*1.	APIS : Emall

Section 7 - Third Parti Integration

- Payment Integration - Google Login Integration

S.No	Question
*1.	Develop an e-commerce website using Angular and integrate a payment gateway for online transactions. Allow users to add products to their cart and proceed to the checkout page. Implement payment integration with a popular payment gateway like PayPal, Stripe, or Braintree. Ensure that the payment process is secure and that users receive appropriate payment status notifications.
*2.	Create a donations platform using Angular where users can contribute to different causes. Integrate a payment system that allows users to make donations of various amounts. Implement a custom dashboard to track the total amount donated to each cause in real-time. Utilize Angular pipes to format the displayed donation amounts.

S.No	Question
#1.	Build a social media application using Angular and incorporate Google Login for user authentication. Users should be able to sign up and log in to the app using their Google accounts. Implement a dashboard that displays user profiles and recent activities. Use Angular pipes to format user details, such as their bio, interests, or the date of their last activity.
#2.	Create a Google Calendar event scheduler using Angular. Integrate Google Login to allow users to sign in with their Google accounts. Implement a custom form where users can input event details such as the title, date, time, and description. Upon submission, the app should create the event on the user's Google Calendar using the Google Calendar API. Use Angular pipes to format event details when displaying them to users.

S.No

Question

#1.

Build a social media application using Angular and incorporate Google Login for user authentication. Users should be able to sign up and log in to the app using their Google accounts. Implement a dashboard that displays user profiles and recent activities. Use Angular pipes to format user details, such as their bio, interests, or the date of their last activity.

#2.

Create a Google Calendar event scheduler using Angular. Integrate Google Login to allow users to sign in with their Google accounts. Implement a custom form where users can input event details such as the title, date, time, and description. Upon submission, the app should create the event on the user's Google Calendar using the Google Calendar API. Use Angular pipes to format event details when displaying them to users.

Section 8 - Major Project Task

S.No	Question
#1.	APIS : ChatBuddy

Angular Front End Development

Syllabus, Assignments Questions

Section 1 - Angular

Section 2 - Components, Expression , Directives Binding & Events

Section 3 - Pipes

Section 4 - Routing & Template Integration

Section 5 - Forms, Service & Http Modules

Section 6 - Project : E-Commerce App:

Section 7 - Third Parti Integration

Section 8 - Major Project Task

Section 9 - Github and AI Tools

Contact Us

Our Address

Email Us

Call Us