The Complete Angular Course- Beginner to Advanced 2022

Learn the basics of cascading style sheets, a stylesheet language for presenting content, and explore selectors, properties, and values including element and class selectors, applying color.

Master cascading style sheets by learning common properties, applying inline and internal styles, using the head section, and understanding selector-based priority to control paragraph alignment.

Explore CSS fundamentals in part 3 of cascading style sheets, covering selectors, element versus state styling, and class priority to manage background colors and practical demos.

Learn CSS fundamentals like font-size and font-family, apply multiple classes and id-based selectors, use state classes with whitespace, and style links and text decorations across elements.

explores CSS selectors and specificity, showing how inline styles outrank ID and class selectors, and how to organize reusable external state files for multi-page styling.

Explore CSS margins, including how the margin property creates space around all four sides, using one to four values, and applying individual margins like margin-left and margin-right to control layout.

Explore how the css padding properties interact with the border to shape the area around a paragraph block and influence the content inside.

Explore CSS position basics, including static positioning and offsets with top, left, and right, and learn how margins and gaps influence element placement inside containers.

Explore fixed and absolute positioning, and how a fixed element stays put during scroll. See how left 90% and other percentage values set width and placement of elements.

Learn how the css float property aligns elements to the left or right, causing text to wrap and images to flow within a paragraph.

Discover Bootstrap, an open source, free framework with a grid system that enables responsive design and content alignment across mobile devices.

Learn how to download and set up Bootstrap for your Angular project, choose the right version, and use Bootstrap to add and customize a button.

Learn button and color themes with classes bootstrap primary and secondary colors for the buttons.

Discover how to build bootstrap forms and tables with responsive layouts, applying common bootstrap classes to style fields, tables, and themes in an Angular project.

Learn how Bootstrap's grid system uses rows and columns to create responsive layouts. Divide pages into equal or variable columns, such as three equal columns, and adapt to device widths.

Define a row and apply column classes to create three equal columns (33.33%) or two equal columns (50%), and observe responsive behavior across small devices, tablets, and laptops.

Design responsive layouts with a 12-column grid, dividing into three columns of four units or other equal or unequal widths, ensuring the total is 12. Group grid rows for flexibility.

Explore typography in bootstrap by seeing how styles and alignment affect buttons and layout, and learn how to include bootstrap via downloaded files or links.

Explore how alerts and badges provide textual feedback for user actions, display warnings, and show notification counts in Angular applications.

Learn to design and customize a responsive navigation bar with dropdowns for mobile, tablet, and desktop, using common classes and lightweight JavaScript to handle expand and collapse.

Explore how models and cards in Angular apps enable dynamic dialogs, modals, and customizable notifications, with hands-on guidance on model classes, states, and form styling.

Learn to implement Angular pagination and spinners, including spinner types, borders, colors, and progress bars, plus navigation controls for loading states and UI feedback.

Demonstrates how to download and integrate bootstrap icons into a project, customize size and color, and manage icon assets through step-by-step guidance.

Explore the fundamentals of programming with JavaScript, including what a program is, source code versus machine code, and how high-level languages are translated into binary for execution.

Explore the history of JavaScript from Netscape origins to its client site usage on about 97% of websites, and its dynamic, multi-paradigm nature.

Explore JavaScript basics, including comments for readability, and how variables store data. Understand the rules for declarations, keywords, and identifiers.

Learn how to declare JavaScript variables with var, let, and const; explore output methods like console.log and document.write, plus basic hello world examples and semicolon usage.

Explore core JavaScript data types—strings, numbers, booleans, undefined—and the concept of dynamic typing, then practice declaring variables with let, concatenation, and console output.

Explore internal scripting basics by declaring variables, understanding undefined values, and displaying results with console.log, document, and alert, while practicing string and value printing.

Explore the basics of JavaScript operators, including assignment with const and let, arithmetic, increment/decrement, compound assignments, and relational and strict equality checks across numbers and strings.

Explore logical operators such as and, or, not, and comparison operators like == and === in JavaScript, with if, else, and switch examples, binary and bitwise basics on 32‑bit numbers.

Explore building conditional logic in Angular using if-else chains and switch case structures, with multiple conditions, comparisons, and default handling.

Explains how to use the conditional or ternary operator to evaluate conditions, compare values with equals and not equal, and handle true or false outcomes with simple examples.

Learn how to use a for loop in JavaScript to run code blocks multiple times, and view examples that generate even numbers using i += 2.

See how to set up a for loop from an initial zero with a guiding condition. Identify pitfalls when the value never changes or the loop cannot exit.

Learn how to define and invoke functions in JavaScript, handle inputs and outputs with arguments, and use external scripts to illustrate function building blocks.

Learn to define and call functions, use return for values, distinguish declarations from expressions, and grasp function scope, anonymous functions, and global variables.

Explore JavaScript functions, including local vs global scope, nested functions, and returning and passing functions as arguments, with practical examples of function lifetime and memory.

Understand the scope of let, var, and const across blocks, loops, and functions, and how hoisting moves declarations to the top. See how access differs inside and outside blocks.

Learn how to use try, catch, and finally to manage errors and cleanup in JavaScript. Understand declaring variables with let, var, and const and enabling strict mode with use strict.

Learn how to use JavaScript to make an HTML page interactive by manipulating the document object model, changing elements and styles, and handling button events with functions.

Explore how to build interactive HTML pages with JavaScript by calling functions, handling user input, displaying prompts and alerts, and converting strings to numbers.

Learn dom manipulation with JavaScript by selecting elements with getElementById, updating content with innerHTML, applying styles, and handling events to sum inputs and display the result.

Build dynamic elements in the Angular course by taking user input, creating and appending list items with the create element function, and updating a live list using bootstrap styling.

Learn how to manipulate the document object, update input fields, and dynamically add or clear elements, while exploring primitive types, objects, and string immutability.

Explore core string operations, including indexing, startsWith and endsWith checks, substring and slice extraction, trim and split, and converting objects to primitive strings with valueOf and toString.

Learn how arrays in JavaScript function as dynamic data structures, from creation with literals and the array function to iteration with for and for…of, and growing arrays with push.

Explore core array operations in this Angular course module, including push, shift, splice, and slice, to add, remove, and insert elements while tracking indices.

Explore arrow function expressions as a compact alternative to traditional function expressions, featuring concise syntax and minimal boilerplate. They lack their own bindings and cannot be used as constructors.

Explore arrow function expressions part-2 by learning how to pass functions as arguments, write anonymous and arrow functions, and use map, filter, and reduce to transform arrays.

Explore how JavaScript objects inherit properties through prototypes, distinguishing own properties from inherited ones, and use Object.create and prototype chains to implement differential inheritance.

Create your own objects in JavaScript using curly braces or the function constructor, defining properties, methods, and the three core characteristics: state, behavior, identity.

This lecture demonstrates creating and extending JavaScript objects, accessing properties with this, using dot and bracket notation, defining methods, and converting objects to and from JSON.

Discover how to create JavaScript objects and access their properties using Object.keys, Object.values, and Object.entries. Explore own versus inherited properties via hasOwnProperty and the prototype concept.

Learn to create objects using functions, define properties with this, and attach methods like a discount function. Explore object instances, prototypes, and identity checks with instanceof.

Explore calling, applying, and binding functions on objects, borrowing functions from one object to another, and using partial function application with or without immediate arguments.

Create a to-do list app in JavaScript using an input field and button, store tasks in an array, and render and remove items with DOM updates.

Explore document object functions by implementing on scroll and other events, binding handlers, updating counters, and manipulating the DOM with practical examples.

Learn how document selectors and functions manipulate content, using host matches, event delegation with addEventListener, and setTimeout to create time-delayed actions on paragraphs and buttons.

Learn how to use the spread operator to merge arrays and objects, control property precedence for duplicates, and update objects within document object function part-3.

Explore TypeScript for Angular and learn how it enables the development of lab applications by introducing optional static typing and clarifying static versus dynamic typing in JavaScript.

Explore TypeScript in detail, learning how strong typing, type declarations, and inference improve JavaScript projects, with Node.js installation, npm usage, and incremental adoption.

Explore static type-checking in JavaScript, spotting type errors like not a function with editor warnings. See how code is transpiled to JavaScript for browser or Node via editor integration.

Explore the TypeScript data types and the type system, including any, number, boolean, void, arrays, classes, interfaces, and enumerations, with practical coding insights.

Learn how type annotations and explicit variable types in TypeScript enforce data types like string, number, and boolean. Explore type inference and safety benefits when compiling TypeScript with JavaScript.

Explore how variables acquire types through explicit annotations or type inference, and examine the any type, undefined values, and how opting out affects code safety.

Learn how to define a class as a blueprint for objects in JavaScript and TypeScript, use a constructor to initialize properties, and compare function constructors with ES6 class syntax.

Learn how to add a function inside a class, declare instance variables and methods, and use a class blueprint to define an object's state and behavior.

The lecture demonstrates creating a student class with properties, initializing the constructor, calculating the average with an arrow function, and accessing properties using this to build objects.

This lecture explains object oriented programming concepts such as classes, objects, and inheritance, showing how a laptop can use a base product class to access name and price.

Explore object oriented programming concepts through a smartphone example, showing how a child class inherits from a parent, uses super for initialization, and overrides methods for polymorphism.

Explore inheritance with a parent shape class and child shapes like square and rectangle, where the area method is overridden, using super to access the parent implementation.

Explore how access specifiers govern visibility of class properties and functions, including public, private, and default public access, to enable encapsulation and safe object interaction.

Explore access specifiers in object-oriented programming, comparing private, protected, and public access, with an animal and dog example and notes on initialization and subclass access.

contrast static and instance members to show how static members belong to the class and instance members to objects, with constructors and class references guiding access.

This lecture explains how private and public modifiers control access to class properties, and how getters and setters enable safe external access to private data.

Learn to declare and initialize class properties with access specifiers in Angular, using public, private, and protected modifiers. Explore constructor shorthand and getters and setters to encapsulate employee data.

Explore interfaces in object oriented programming, including data abstraction, contracts, and implementing the interface while hiding implementation details behind a defined shape.

Discover how interfaces declare properties and functions, how classes implement them with concrete definitions, and how objects provide data types and implement area and length.

Learn how a class can implement multiple interfaces, define interface members such as name, variables, and functions, and implement shapes like polygon, square, and rectangle with a draw method.

This lecture explains namespaces as a tool to group related classes and interfaces, and to prevent global namespace pollution. It covers organizing code into separate files with namespace scope and export.

Learn how to use namespaces to organize shapes and objects, create class-based objects like square and rectangle, reference components within a namespace, and export drawings in a practical Onshape workflow.

Master namespaces and type assertion versus type casting in Angular, and build object-oriented classes with imports, exports, and inheritance.

Explore Angular as a modern, component-based development platform and framework, learn to structure projects using templates, directives, and dependency tips, and build scalable apps across platforms.

Learn to use the Angular CLI to create and manage an Angular application with workspace setup. Explore components, templates, and dependency injection that drive Angular apps.

Explore the Angular project folder structure, including app, assets, environments, and app routing, and learn how the root component and module declare and assemble components.

Explore Angular architecture by examining components as the building blocks and how modules organize them with decorators, imports, and exports within a single page application.

Learn how Angular architecture organizes modules, browser module and platform browser imports, and bootstrap to load the app component at launch.

Explore how an angular module organizes an application by grouping components, services, and bindings. Learn how imports, exports, declarations, and the template and pipes define and connect the component hierarchy.

Learn how a component serves as a building block with a selector and template to create and insert an instance into a view, and how modules declare and load components.

Create a new component part 2 covers building and declaring a component, understanding its role in an app, and using selectors and previews to render in the browser.

Explore built-in attribute directives in Angular and how they modify element appearance or behavior through property changes, with examples of updating input values, colors, and handling events.

Explore built-in attribute directives in Angular, binding variables with square brackets to conditionally apply styles, colors, and gradients based on a boolean choice.

Learn how built-in attribute directives in Angular change element appearance and behavior using square-bracket bindings, conditional logic, and class bindings like ngClass to toggle styles such as blue.

Learn built-in Angular structural directives to add, remove, or manipulate elements on the host; see conditional rendering and dynamic data display using brackets and the structural prefix.

Learn to handle change events on a select element, access the event object, and bind the selected color value using built-in structural directives in Angular.

Explore how built-in structural directives manage dynamic views using switch cases, defaults, and conditional rendering in Angular, with yellow, red, and blue examples to illustrate switching between views.

Learn how to download and install a package, bootstrap it in a sample app, and add integrations like WhatsApp and Instagram while managing files and updates across components.

Discover how to install and compare Angular packages, manage version numbers, and import items and icons into your app.

Learn how to enable and configure routing in Angular, define routes with components, and control what the user sees by navigating between views with a router outlet.

Explains feature modules as an organizational approach for grouping functionality in an angular app, using student and customer modules to delineate boundaries and manage component declarations, exports, and imports.

Explore lazy loading in Angular by loading modules only when needed, reducing initial bundle size. Learn to configure routes for lazy loaded modules like seller and customer.

Explore how pipes in Angular transform strings, currencies, dates, and numbers in template expressions. Learn to use built-in pipes, create custom ones, and support internationalization.

Explore angular pipes to transform data, including uppercase and currency formatting with the default USD, decimal fraction controls, and creating custom pipes to implement your own data transformations.

Create a custom pipe in Angular by defining a pipe class with a transform method, handling multiple inputs to perform operations like multiplication, and using the pipe across components.

We compare Angular forms—reactive forms and template-driven forms—explaining how each handles form models, validation, and updates with direct access to the underlying object model.

Explore template-driven forms in Angular, showing how two-way data binding keeps the view in sync with the component model and how to configure FormsModule for input handling with binding.

Explore template-driven forms in Angular, demonstrating two-way data binding, form states, validation, and user feedback with Bootstrap styling.

Master template-driven forms in Angular by customizing validation messages for required fields and minimum length, including names and titles.

Explore template-driven forms in Angular, focusing on validation, enabling and disabling the submit button based on form validity, and handling form state within a beginner-to-advanced course.

Learn how to build reactive forms in Angular, initialize form objects, bind input fields, and manage user and customer data within a component—Part 1

Learn to implement reactive forms in Angular by creating form groups and form controls, inject the form via dependency injection, and manage and synchronize form values within the component.

Explore building and validating complex reactive forms in Angular, creating grouped form sections for addresses, education days, ideas, and scores, and applying validators to ensure form validity.

Explore validation in the Angular form builder by wiring control validation, retrieving registered controls, and handling real-time feedback for fields like first name, last name, and email.

Explore how Angular uses services to separate business logic from components, inject dependencies, and enable modular, reusable code through providers and injectable services.

learn how to create a service, inject a dependency, and fetch data in an Angular app by wiring a root-level provider and consuming the API in a component.

Discover how to create a component in angular and inject a service to manage data flow. Subscribe to data streams, see when data arrives, and learn why dependency injection matters.

Learn to share data between parent and child components in Angular using input and output decorators, enabling data flow from parent to child and feedback from child to parent.

Learn to pass data from parent to child with input properties and the input decorator, and to notify the parent by emitting events with an EventEmitter and the output decorator.

Explore sending data to a parent component in Angular by using an output event and event emitters to pass item values from a child to update the product list.

Explore Angular animations by covering module declaration, animation functions, and state-based transitions to animate properties with open and close states and defined durations.

Explore creating and animating Angular components, define animation states and transitions, and apply animation functions to build engaging, dynamic user interfaces.

Explore how to add image animations in Angular using state-driven transitions, including scale, translate, and rotation, controlled by three buttons to demonstrate transitions.

Explore Angular Material, the official material design component library for Angular, and learn how to set up, import, and use common UI components to build scalable, high-quality interfaces.

Master Angular Material by configuring modules, exploring calendar and date range features, implementing toolbars, side navigation, chips, and input fields with Angular Material extensions and API-driven data binding.

Explore angular material part 3, building interactive interfaces with tabs, chips, and radio buttons, and learn to control animation speed and duration via the material API.

Learn to enhance Angular apps with Angular Material by adding icons to buttons, using mat-icon with color, and implementing dialogs and expansion panels.

Learn how to test angular apps using the built-in framework, set up tests alongside development with karma, and run browser-based tests (Chrome) to catch bugs without breaking existing code.

Learn how to test an Angular application, including running tests in Chrome and mobile browsers. Understand how display functions group related statistics and spaces within components.

this lecture explains how to test Angular components using the testing utilities, including creating component instances, handling before each setup, and validating expected versus actual values with DOM access.

Discover how Angular component lifecycles run from creation to destruction, using lifecycle hooks to initialize, detect changes, and clean up.

Explore how Angular internationalization and localization prepare apps for global use, covering locale identifiers, date and currency formatting, and translating text with the Angular localize workflow.

Explore how to implement internationalization in Angular by creating and configuring locale-specific translation files, managing French localization, and switching languages at runtime.

Create a new angular project and component, integrate bootstrap, and implement a to-do list with an input and button to push items to a displayed list.

Build and manage a to-do list in Angular by adding, removing, and splicing items with index-based operations, ensuring automatic display refresh.

Build a shopping cart application in Angular by creating product components, a product service, and routing to display products, price details, and cart interactions.

Create a shopping cart in Angular by wiring add-to-cart functionality, managing an items array, displaying products, and handling prices, stock, and quantity updates.

Learn to implement a shopping cart quantity in Angular by adding a quantity property initialized to zero, incrementing on add, displaying the current quantity, and guarding against negative values.

Build a shopping cart in Angular part 4 by replacing a child component with a cart service, enabling add-to-cart, shared cart state, and quantity updates across components.

Create a shopping cart application in angular, including adding items, preventing duplicates by checking if a product is present, incrementing quantity, removing items, and displaying prices.

Discover how the RxJS library enables reactive, asynchronous programming in Angular by using observables and observers. Learn to compose data streams with operators like map and reduce and handle errors.

Explore the RxJS library by creating observables, subscribing to future values, and using operators like map to transform data and filter values.

Create and subscribe to observable sequences, receive data, and handle errors and completion. Use map and catch to transform data, handle errors, and return observers for retries.

Explore RxJS observables in action, emitting sequential numbers at defined intervals, with subscribe and log, and using operators like take and retry to manage values.

Get ready for interview questions on Angular topics such as components, modules, services, and dependency injection, with a focus on data binding and template concepts.