Complete Angular Course for Beginners & Professionals

Install Node.js, Angular CLI, and TypeScript to set up a complete Angular development environment, use npm to install the CLI, verify versions, and generate components, services, and modules.

Install Visual Studio Code and WebStorm on Windows by downloading from the official site, running the 64-bit installer, and launching after setup.

Create a workspace named angular-tool and generate your Angular project with ng new, enabling routing and css. Start the dev server on port 4200 as dependencies install.

Explore the Angular folder structure and the control flow of an application, from the root app module and root component to modules, components, assets, and environment configurations.

Explore how to create and style an Angular app component, apply component and global styles, use data binding with interpolation, and compare global versus component styles for maintainability.

Create a custom Angular component and wire it into the app module. Style it with global or component css and plan to apply bootstrap for cleaner ui.

Learn how to configure Bootstrap in an Angular application, including creating a backup, installing Bootstrap via npm, and updating angular.json to load Bootstrap styles and scripts.

Configure google fonts in angular by adding the google font link and import, then apply the font-family. Install font awesome via npm to use icons in your app.

Explore Angular Bootstrap cards through a four-card grid, binding images and text to a simple card component, with an image, title, description, and a book now button using data bindings.

Explore all types of data binding in Angular, including interpolation, property binding, and events binding, and learn to bind dynamic data from components and services, with live time updates.

Learn angular event binding with a simple counter: bind a count variable to the template, display it, and connect increment and decrement buttons to update the state, stopping at zero.

Explore dynamic binding in angular by creating a component with a wish message that updates via three buttons (good morning, good afternoon, good evening) using a single parameterized updateMessage function.

Build an Angular product item in a cart, modeling items as objects with serial, name, quantity, price, and image; implement increment/decrement with event binding and object spread.

Build a shopping cart in Angular by creating a cart component, listing products, and adjusting quantities with plus and minus buttons, then calculate the grand total with INR currency formatting.

Learn how to implement two-way data binding in Angular forms, compare manual and automatic binding methods, and set up the forms module to bind input state to the component.

Explore automatic forms binding and two-way data binding in Angular by binding a username variable with ngModel, importing the form module, and ensuring a unique name attribute for seamless syncing.

Learn how to implement a textarea with Angular form binding, bind its content to a message variable, and display a dynamic remaining character count.

Implement a show password feature with Angular forms binding by toggling the input type from password to text via a checkbox and a binding variable.

Explore an amount range example in Angular forms binding, showing how to set min and max values, bind to an amount variable, and display currency formatting.

Explore how to implement a theme selector in Angular using form binding, toggling a dark theme with a switch, and dynamically applying classes to the body and card elements.

Learn to build a complete Angular registration form by binding all fields to a single user object, updating state with ngModel, and submitting data to the console.

Explore Angular structural directives to conditionally render content and UI elements using a boolean login state, with examples of showing or hiding cards and login/logout buttons.

Learn to use the angular ngfor directive to loop through items and display them as cards in a shopping cart with data binding, images, names, prices in INR, and quantities.

Learn to refactor a shopping cart by turning each product card into a reusable nested component and pass data from parent to child using input annotation.

Explore Angular pipes to transform raw data into user-friendly formats, including uppercase and lowercase text, date and currency formatting, and object inspection with JSON and pre pipes.

Declare and export a separate employee model to reuse type data across components. Inject a service into a component via dependency injection to fetch employee data from a server.

Learn how observables enable Angular services to fetch data from a server, subscribe to updates, and bind asynchronous data to the component UI.

Connect an Angular app to an external server using a user model, a dedicated service, and HttpClient, subscribing to an observable to fetch and display data.

Explore how to implement Angular error handling for failed server requests by adding a private error handler in the service, piping catchError, and displaying user-friendly messages on the UI.

Learn to build an Angular contact app with three components, fetch data from a server via a service using observables, and enable parent-child data transfer to display a selected contact.

Explore fetching data with services and transferring data between parent and child components in an Angular contact app, using input and output bindings to display the selected contact details.