Install and verify Node.js, install the Angular CLI via npm, install an editor (Visual Studio Code recommended), and install Git for a graphical interface to manage projects in Angular.

Create your first Angular application by using ng new, choose default routing and CSS options, then run ng serve to view on localhost:4200; edit components and see live updates.

Explore how to structure an Angular workspace with multiple applications and libraries, and learn to create, manage, and share code across projects.

Angular teaches how modules, components, and services relate with routing, imports, exports, and providers, using a township analogy and npm third-party libraries.

Explore how package.json, package-lock.json, and node_modules manage dependencies in angular projects, explain dev versus production dependencies, and show why node_modules should be ignored in git.

Explore the Angular workspace structure, editor config, and angular.json project configurations, including apps, libraries, environments, and the bootstrap process.

Learn how an Angular component is the smallest complete feature and how modules group components into reusable UI units via routing and services that connect to the backend.

Create a new Angular component with the Angular CLI, exploring path and flat options, skip test, and observe automatic module declarations and usage in templates.

Explore how to customize Angular component prefixes by defining a global prefix in angular.json or applying per-component changes, and learn to create components and update selectors accordingly.

Learn how to create dynamic content in Angular apps using interpolation to display component properties, methods, arrays, and objects in HTML, including binding rules and access patterns.

Explore how to implement event binding in Angular, handling click, mouse over, and change events; update properties via interpolation and trigger alerts with a responsive user interface.

Learn property binding in Angular by using square brackets to bind booleans for enabling and disabling elements, and compare with interpolation for id attributes in a simple app.

Learn how to apply dynamic css classes in Angular using property binding, including string, array, and object syntax, conditional classes from booleans and methods, to style inputs and buttons.

Learn attribute binding in Angular by binding element attributes with square brackets, using component values to set image src, height, and width.

Master style binding in Angular by using [style] to set color and font-size in templates, switch between string and object formats, and bind values from the component for dynamic styling.

Learn to use a template reference variable in Angular to access an HTML input element in the same template and toggle a button's disabled state with its value.

Explore the Angular *ngIf directive for conditional rendering in templates, displaying a list only when a boolean is true, and contrast endif with hidden regarding DOM presence.

Explore implementing if and else in Angular using ng-template and template reference variables to conditionally render content with then and else blocks, including handling native element constraints.

Learn how to use the *ngFor directive to render lists in Angular, display indices, first/last and even/odd items, and show object data in a table.

Improve for loop performance in Angular apps by using trackBy to minimize DOM updates when rendering large lists, focusing on tracking by name to avoid re-creating rows.

Create a new GitHub repository for a bookstore angular app with public visibility. Clone locally, install Git, and commit and push changes to the remote repository.

Learn to architect a real time bookstore app with multiple modules and features, including public, user, and admin areas, authentication, and UI design using Bootstrap and Angular Material.

Set up routing in a new Angular application by default and organize it with a separate routing module to keep the app module clean and robust.

Explore routing with multiple modules in Angular, including setting up an auth module with login and signup routes, configuring child routes, and using a shared layout via router outlets.

Learn how to split Angular routing into multiple feature modules using forRoot and forChild, creating separate routing modules for scalable, maintainable apps.

Explore how to use multiple router outlets to create a hierarchy of layouts with shared headers and footers, while allowing module-specific layouts for different routes.

Master how to pass parameters in angular routes by configuring a public module, defining routes for all books and book details, and handling dynamic ids in the URL.

Learn how to build seamless navigation in Angular using routerLink, pass dynamic parameters, and use relative paths to create a single-page app with no extra network loads.

Learn to retrieve route parameters in Angular with ActivatedRoute: use dependency injection and OnInit to subscribe to route params and extract id and author for a component.

Learn to access route parameters in Angular by retrieving the user id from parent and child routes with ActivatedRoute, including null handling in the user module.

Pass data through the url query string and access it in an Angular component using activated route and query param subscription, then display name, image, and id in templates.

Learn to navigate between components in Angular by using the router in the component file, invoking router.navigate with fixed and dynamic URL paths, parameters, and query params.

Implement a 404 not found page in Angular by using a wildcard route and a Not Found component, with proper routing module order to handle unknown URLs.

Configure a default route in angular with redirect to the about page, using path match full. Apply the same redirect across modules like public routing to all books.

Learn how to implement lazy loading in Angular to improve performance by loading modules on demand, using loadChildren in routing, and optimizing production builds.

Learn three methods to install bootstrap in an angular app and design pages with bootstrap components. Use cdn, npm install, and angular.json styles to achieve responsive navigation and themes.

Learn how to install Angular Material in an Angular application by running the install command, selecting a theme, enabling typography and animations, and configuring packages and styles.

learn to generate angular material components automatically using schematics and apply them to build a responsive ui with buttons, side navigation, address forms, tables, and drag-and-drop features.

Learn to build a responsive toolbar with Angular Material. The lecture guides importing MatToolbarModule, using mat-icon and mat-button, and removing bootstrap for a polished header.

Create a separate Angular Material toolbar, integrate it into the third module, and export and import it via the app module to reuse the toolbar.

Create a dedicated Angular Material module to export toolbar, button, and mat icon, and import it across app modules to avoid duplicating material imports.

Clean up dummy code and refactor the app into a dedicated books module for a bookstore. Restructure components and routing, and add a shared toolbar and footer.

Remove redundant code and streamline navigation in the angular app by updating links, router configurations, and lazy-loaded routes, ensuring the home, books, login, and sign up pages work seamlessly.

Learn to create an Angular service, inject it via dependency injection into a component, and display hardcoded book data using book and price models, with module-level providers.

update the design of book card to display multiple books responsively using angular material card, a flex container, centered alignment, margins, and adjustable width for desktop and mobile views.

Explains how providedIn root yields a single service instance across the app, while providedIn any creates separate instances for lazy loading modules; eager loading shows no difference.

Learn how to inject services in Angular using useClass in the root module, swapping implementations with a class provider while keeping components updated via a shared singleton counter service.

Explore sharing a single service instance with the use existing provider in Angular. See how counter service and counter to service can share one instance via use existing.

Learn how to use the use value provider in Angular to bind values via a token, inject them into a component, and display app title and description.

Learn to use factory providers with useFactory in Angular to apply logic before instantiating a service, using tokens, dependencies, and conditional factories.

Learn to use getter and setter in Angular by converting the book model from interface to class, encapsulating author logic, and applying it across components.

Explore the three component relationships in Angular—parent to child, child to parent, and siblings—demonstrated through a bookstore app and real-world family analogies, and learn data passing across modules.

Pass data from a parent to a child in Angular using the @Input property, and master aliasing, multiple inputs, and conditional display with booleans.

Pass data from parent to child using the @Input decorator, then use getter and setter to modify the data in the child before use.

Pass data to a child component using a template reference variable, calling a public method from the parent to set data on the child.

Access a child component in Angular using @ViewChild and after view init to read and set data, while using template reference variables for a button and a p element.

Pass data from a child to a parent using @Output and EventEmitter. Trigger a button click to emit data to the parent.

Learn to pass data between components in Angular by using a shared service, enabling communication from parent to child, child to parent, and between siblings or unrelated components across modules.

Explore Angular hooks as the component lifecycle, including ngOnChanges, ngOnInit, ngDoCheck, and ngOnDestroy, and learn how Angular creates and destroys component instances as the app navigates.

Understand the ngOnInit lifecycle and the order: constructor, ngOnChanges, then ngOnInit, with ngOnInit handling initial API calls after input properties have initialized.

Learn how ngDoCheck detects changes in Angular by manually tracking updates in a parent–child data flow, contrasting object reference changes with value changes and the role of DoCheck.

Explore Angular content projection and the ngAfterContentInit and ngAfterContentChecked hooks. Learn how projected content initializes and updates, and how a parent passes data to a child through content projection.

Discover how ngAfterViewInit runs after a component's view is initialized, enabling code that uses element ref and ViewChild to update a button's text post-initialization.

Explore how the ngAfterViewChecked hook tracks changes from a child component to its parent using view child, updating the parent console log on every view change.