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
Structure content with lists and tables
Working with images and media
CSS
Apply styling to HTML page
Fundamental CSS Properties
Animations and Transitions
Bootstrap
Building Blocks
Variables, declarations: var,let and const
Blocks and Iteration
Logic Development
Arrays
Creation, reading and updation
Searching, sorting and filtering
Duplication and processing
Object Literals and JSON
Properties, keys and values
Creation, accessing and updation
Strings
Working with strings and JSON
Foundation
Declaration and definition
Call by value and reference
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
Working with array methods
Imperative Element Creation
Selection, reading, updation and deletion
Generation of user interface
Nodelist vs HTMLCollection
Events
Event listeners, handlers and event binding
AJAX
Event based API call handling
Typescript
Types, Functions and execution flow
Classes and class inheritance
Organizing our applications with modules
Setup and Foundation with Directives and Pipes
Angular CLI and module structure
Data binding and event handling
Component Life Cycle
ngViewInit and ngViewChecked
ng-template and ng-content
Events, Observables and Subjects
Observer Subscriber pattern
Working with RxJS and Observables
Multicasting with Subjects
Services
API calls and CRUD operations
Routing
Routing Module configuration
Working with routing and services
Template Forms
ngForm, template variables and property binding
Form object properties, methods and events
Validation and error handling
Reactive Forms
FormControl and FormGroup
Data binding and validation
Dynamic Forms
Iteration of Form Elements
Module Structure
Component decorator and meta data in depth
NgRx
Angular Material
Display some text with data binding using interpolation
Live Demo
Evaluate logical expressions and display them using interpolation
Live Demo
Display the square root of 14 using interpolation
Live Demo
Evaluate the integer part of a decimal number and display it using interpolation
Live Demo
Transform a string into uppercase and display it using interpolation
Live Demo
Evaluate the length of a string and display it using interpolation
Live Demo
Evaluate the reverse of a string and display it using interpolation
Live Demo
Evaluate the sum of two numbers and display it using interpolation
Live Demo
Evaluate the greatest of two numbers and display it using interpolation
Live Demo
Evaluate whether a number is even or odd and display 'even' or 'odd' using interpolation
Live Demo
Evaluate whether a number is positive or negative and print 'positive' or 'negative' using interpolation
Live Demo
Determine the greatest between three numbers and display it using interpolation
Live Demo
Conditionally change the image URL using property binding
Live Demo
Merge two arrays and display all the elements
Live Demo
Apply border-width to an element using property binding
Live Demo
Apply styles to h1 elements using property binding
Live Demo
Flatten a multi-dimensional array and print it using interpolation
Live Demo
Create a list from an array of numbers
Live Demo
Create a list from an array of strings
Live Demo
Create a list from an array of values
Live Demo
Create a list of h1 elements from an array of numbers
Live Demo
Sort an array and display the elements in a list
Live Demo
Create a list of h1 elements from an array of strings
Live Demo
Create unordered list and ordered list from an array of strings
Live Demo
Display a list of strings in lowercase from an array of strings
Live Demo
Display two ordered lists in uppercase and lowercase from an array of strings
Live Demo
Create cards from an array of objects
Live Demo
Display a table for a given array of objects
Live Demo
Print each object in a separate list for a given array of objects
Live Demo
Print the object property values in uppercase from an array of objects
Live Demo
Print the properties of an object
Live Demo
Display the images from an array of image urls
Live Demo
Print only the first two letters of string elements from an array of strings
Live Demo
Print only the first letter of string elements from an array of strings
Live Demo
Take an array of strings and display them in reverse order in a list
Live Demo
display array of objects in table with female students row in pink
Live Demo
display each array of object in table
Live Demo
display each string of array in flex boxes
Live Demo
display each array element in flex boxes
Live Demo
Display different elements conditionally using ngIf
Live Demo
Display different images conditionally using ngIf
Live Demo
Display student details from an array of object and display male/female image for male/female students
Live Demo
Display numbers from an array only which are less than 25
Live Demo
Display numbers from an array only which are greater than 25
Live Demo
Print only odd numbers in a list from an array of numbers
Live Demo
Apply green color in list items if positive and red color if negative
Live Demo
Apply green color in list items if even and red color if odd
Live Demo
Display array of objects in table with different colors for rows having
male and female people
Live Demo
Display array values in a list and apply green color for even values
and red color for odd values
Live Demo
Display array values in a list and apply green color if the string length
is even and red color if length is odd
Live Demo
apply red color to html h1 element
Live Demo
Display array values in a list and apply italic style if the value is even
and apply bold style if the value is odd
Live Demo
Display the content of an element when clicked on it
Live Demo
Create a project that registers the number of likes and dislikes
Live Demo
Changing image URL using property binding and event binding
Live Demo
Create a todo list with delete button
Live Demo
Display the elements of an array with index in a list
Live Demo
Bind event handler with arguments to display the number 100
Live Demo
Display the selected date from datepicker in h1 element
Live Demo
Display check box value in console
Live Demo
Print the button value in console on clicking it
Live Demo
Display select box value in h1 element
Live Demo
Display respective images on clicking radio button
Live Demo
Display radio button value on check
Live Demo
Calculate multiplication and division of two numbers and display
it using buttons
Live Demo
Calculate the subtraction of two numbers and display it using button
Live Demo
Calculate the addition of two numbers and display it using button
Live Demo
Display text-box value in h1 element on keyup event
Live Demo
Display text box value in uppercase in h1 element
Live Demo
display text box value in h1 element on clicking a button
Live Demo
Print text box value in console on clicking a button
Live Demo
Alert some text on clicking a button
Live Demo
display the event object for a click on div with 300px width and height
with 200px in angular
Live Demo
Change search box text colour using custom directives
Live Demo
Search and sort filter on click
Live Demo
Search data in a list using custom pipe
Live Demo
Data binding with ngModel
Live Demo
Data binding with checkbox and button disabled
Live Demo
radio button based conditional display
Live Demo
ngFor even odd property example
Live Demo
Angular calculator using radio buttons
Live Demo
Parent-child component communication using @Input decorator
Live Demo
Child-parent using @Output decorator
Live Demo
Using @Input and @Output together
Live Demo
Accessing and displaying form input values
Live Demo
Angular ReactiveForms validation, filling and resetting data
Live Demo
Reactive Forms validation and displaying data in table
Live Demo
Routing example with several components with different data
Live Demo
Angular childrouting with Router Links
Live Demo
Angular Childrouting with Router navigate method
Live Demo
Angular login logout with basic guard
Live Demo
Basic component communication using a service
Live Demo
Arithmetic operation using basic service
Live Demo
Basic todo list using service
Live Demo
Todolist with delete functionality
Live Demo
Basic products cart example using a service
Live Demo
Angular async addition with spinner
Live Demo
Angular HTTP calls using HttpClient
Live Demo
Angular Classifieds Project
Live Demo
Angular component communication using Eventemitter
Live Demo
Basic BehaviourSubject example
Live Demo
Angular Observables, Subjects and Behavioursubjects
Live Demo
Angular products cart with login and logout
Live Demo
Updating two components with EventEmitter and BehaviourSubject
Live Demo
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.
