Web Development
Frontend Development with Angular
- 2.6k Enrolled
- All levels
- Last updated 01/2024
- English,Telugu,Hindi
Course Description
Welcome to the Frontend Development with Angular course.
In this practical hands-on training, you’re going to master web development using Angular with this ultimate course that includes all the latest web development technologies.
We provide an end-to-end guidance to all topics necessary for current industry level standards. We focus on foundational topics so that students have a strong knowledge on basics. We understand that theory alone isn't going to give you the best experience, so that's why this course is packed with practical hands on examples that you can follow step by step.
What you’ll learn
- Introduction to Web Development
- HTML, CSS and Bootstrap
- Programming Foundation with JavaScript
- Data Structures in JavaScript
- Functional Programming with JavaScript
- Asynchronous activities, Events and DOM
- TypeScript and Angular Foundation
- Component communication and Navigation
- Handling Data with Forms
- Architecture and Advanced Angular
- Project and Case Study
- Assignments and Projects
HTML
What is Web?
HTML building blocks
Text formatting elements
Structure content with lists and tables
User input with forms
Working with images and media
Navigation with anchors
CSS
Apply styling to HTML page
Fundamental CSS Properties
Box Model
Selectors
Flexbox
Responsive design
Animations and Transitions
Bootstrap
Utility classes
Helpers
Components
Layout creation
Responsive layout
Forms
Icons and Images
Building Blocks
Variables, declarations: var,let and const
Data types
Operators
Expressions
Statements
Blocks and Iteration
if..else
switch...case
while
for
nested for
Logic Development
Conditional programs
Iterative programs
Pattern programs
Accumulation programs
Typecasting
Arrays
Indexing and memory
Creation, reading and updation
Searching, sorting and filtering
Working with scenarios
Duplication and processing
Object Literals and JSON
Properties, keys and values
Creation, accessing and updation
for-in based processing
Array of objects
Working with JSON
Strings
Immutability
String handling
String methods
Array of strings
Working with strings and JSON
Foundation
Declaration and definition
Parameters and arguments
Call by value and reference
Working with functions
Reusability
Types
Function expressions and literals
Firstclass functions and callbacks
Object oriented principles
IIFE and anonymous functions
Arrow functions and default parameters
Scope
Global scope, block scope and closure
Lexical scope
Working with array methods
Methods and this keyword
call, apply and bind
Imperative Element Creation
DOM element creation
Selection, reading, updation and deletion
Styling elements
Generation of user interface
Nodelist vs HTMLCollection
Events
Event listeners, handlers and event binding
Event Object and target
Form handling
Working with events
Working with DOM
AJAX
Asynchronous functions
Event based API call handling
Callbacks and Promises
axios
Working with json-server
Typescript
Types, Functions and execution flow
Classes and class inheritance
Decorators in TypeScript
Organizing our applications with modules
Interfaces
Setup and Foundation with Directives and Pipes
Angular CLI and module structure
Components
Data binding and event handling
Change detection
Directives and pipes
Component Life Cycle
ngOnInit and ngOnChanges
ngDoCheck
ngViewInit and ngViewChecked
ng-template and ng-content
ViewChild
Events, Observables and Subjects
Observer Subscriber pattern
RxJS operators
Working with RxJS and Observables
Promises vs Observables
Multicasting with Subjects
Services
Dependency Injection
Singleton pattern
HTTP service methods
Interceptors
API calls and CRUD operations
Routing
Routing Module configuration
Parameterised routing
Guarding routes
Lazy loading
Working with routing and services
Template Forms
FormsModule and ngModel
ngForm, template variables and property binding
Form object properties, methods and events
Validation and error handling
Styling and classes
Reactive Forms
ReactiveFormsModule
FormControl and FormGroup
Data binding and validation
Custom validators
Asynchronous validation
Dynamic Forms
FormArray
FormBuilder
Dynamic Input validation
Iteration of Form Elements
Module Structure
Core and shared modules
Feature module loading
Component decorator and meta data in depth
Directives in depth
NgRx
redux and store
actions and selectors
reducer
effects
Angular Material
Setup and themes
Components
Grid list
Accessibility
Display some text with data binding using interpolation
Evaluate logical expressions and display them using interpolation
Display the square root of 14 using interpolation
Evaluate the integer part of a decimal number and display it using interpolation
Transform a string into uppercase and display it using interpolation
Evaluate the length of a string and display it using interpolation
Evaluate the reverse of a string and display it using interpolation
Evaluate the sum of two numbers and display it using interpolation
Evaluate the greatest of two numbers and display it using interpolation
Evaluate whether a number is even or odd and display 'even' or 'odd' using interpolation
Evaluate whether a number is positive or negative and print 'positive' or 'negative' using interpolation
Determine the greatest between three numbers and display it using interpolation
Conditionally change the image URL using property binding
Merge two arrays and display all the elements
Apply border-width to an element using property binding
Apply styles to h1 elements using property binding
Flatten a multi-dimensional array and print it using interpolation
Create a list from an array of numbers
Create a list from an array of strings
Create a list from an array of values
Create a list of h1 elements from an array of numbers
Sort an array and display the elements in a list
Create a list of h1 elements from an array of strings
Create unordered list and ordered list from an array of strings
Display a list of strings in lowercase from an array of strings
Display two ordered lists in uppercase and lowercase from an array of strings
Create cards from an array of objects
Display a table for a given array of objects
Print each object in a separate list for a given array of objects
Print the object property values in uppercase from an array of objects
Print the properties of an object
Display the images from an array of image urls
Print only the first two letters of string elements from an array of strings
Print only the first letter of string elements from an array of strings
Take an array of strings and display them in reverse order in a list
display array of objects in table with female students row in pink
display each array of object in table
display each string of array in flex boxes
display each array element in flex boxes
Display different elements conditionally using ngIf
Display different images conditionally using ngIf
Display student details from an array of object and display male/female image for male/female students
Display numbers from an array only which are less than 25
Display numbers from an array only which are greater than 25
Print only odd numbers in a list from an array of numbers
Basic ngClass example
Basic ngStyle example
Apply green color in list items if positive and red color if negative
Apply green color in list items if even and red color if odd
Display array of objects in table with different colors for rows having
male and female people
Display array values in a list and apply green color for even values
and red color for odd values
Display array values in a list and apply green color if the string length
is even and red color if length is odd
apply red color to html h1 element
Display array values in a list and apply italic style if the value is even
and apply bold style if the value is odd
Display the content of an element when clicked on it
digital clock
Create a project that registers the number of likes and dislikes
Changing image URL using property binding and event binding
Create a todo list with delete button
Display the elements of an array with index in a list
Bind event handler with arguments to display the number 100
Image gallery app
Display the selected date from datepicker in h1 element
Display check box value in console
Print the button value in console on clicking it
Display select box value in h1 element
Display respective images on clicking radio button
Display radio button value on check
Calculate multiplication and division of two numbers and display
it using buttons
Calculate the subtraction of two numbers and display it using button
Calculate the addition of two numbers and display it using button
Display text-box value in h1 element on keyup event
Display text box value in uppercase in h1 element
display text box value in h1 element on clicking a button
Print text box value in console on clicking a button
Alert some text on clicking a button
display the event object for a click on div with 300px width and height
with 200px in angular
Change search box text colour using custom directives
Basic routing example
Routing example with several components with different data
Angular childrouting with Router Links
Parameterized routes
Query Params
Angular Childrouting with Router navigate method
Routing with guards
Angular login logout with basic guard
Angular lazy loading
Basic component communication using a service
Arithmetic operation using basic service
Basic todo list using service
Todolist with delete functionality
Basic products cart example using a service
Email app using services
Angular async addition with spinner
Angular HTTP calls using HttpClient
Angular Classifieds Project
Angular component communication using Eventemitter
Basic BehaviourSubject example
Angular Observables, Subjects and Behavioursubjects
Angular products cart with login and logout
Updating two components with EventEmitter and BehaviourSubject
Book A Trip
The Book A Trip project utilises Google Maps and helps a user to enter their destination and get the directions to the specified location. It also prints the distance between the two locations. The user can also manually drag the location marker to change their source and destination locations on the map.
Book Mart
The Book Mart project is an e-commerce application which consists of a big list of books that a user can choose from. It lets the user search, sort and filter the books according to title, discount, price or categories. Users can add the books to cart where they can add, remove or increase the number of each book they want to buy. The cart display the total price after deducting the discount and adding delivery charge wherever applicable.
Credo Card
The Credo Card project is a credit card application that displays a customer's credit card information like spending limit, pending transaction, spending availability etc. It allows customers to login according to their credentials and display the details(Go to the live demo and enter email as 'admin' and password as 'password' to see the complete application).
Countries List
The Countries List project displays a list of all countries of the world. This project lets us sort,filer and search the countries list. It lets the user to sort the countries in ascending and descending order of their populations. It also allows users to filter the countries according to region and subregion. It consists of a search box where users can search for a particular country. There is also an option to switch the view between card view and details view. When users click on a particular country, it locates the country on the world map.
Memory Game
The Memory Game project is a basic remembering game where users can score points by remembering the cards displayed on the screen. Initially, the screen displays eight cards consisting of different pairs of pictures. After a certain time, the cards flip and hides the pictures. Players need to remember the picture cards and match them in pairs. Players score points according to the number of pairs they can match. The players can also select the number of rounds they want to play.
₹25000(Offline)
₹20000(Online)
This course includes
- Lectures 50
- Duration 1h 30m
- Skills Beginner
- Language English,Telugu,Hindi
- Certificate Yes
Top Listed Courses
Frontend with Angular
₹20000
Frontend with ReactJS
₹20000
Fullstack with MEAN
₹30000
Fullstack with MERN
₹30000
Programming with Java
₹30000
