Mastering Angular + Ang 17 - 18 + Interview + E-commerce App

Explore the component-based architecture in Angular by examining the root app component, its HTML, CSS, and TypeScript files, and how routing modules structure a hierarchical app.

Explore how to render dynamic messages in Angular using interpolation with double curly braces, displaying TypeScript variables in HTML templates. See how updating the title variable changes the display.

Display the sum of A and B by defining them as class members, computing answer as A plus B with this, and showing it in HTML styled at 1.5 rem.

Understand how the NgModule decorator organizes an Angular app by grouping components, directives, and services into a single metadata object, with declarations, imports, providers, and bootstrap.

Master bootstrapping and using standalone components in Angular by importing a form component into the app, updating main.ts, and rendering via its selector.

Learn how Angular property binding uses square brackets to set DOM properties, compare it with interpolation, and understand when to bind booleans and non-string values.

Bind the image tag's src to a variable containing the assets path, then style the image with height, width, and centering to render correctly in an Angular app.

Discover Angular event binding by wiring a click event to a component function, triggering alerts, passing parameters, and comparing one-way event binding with property binding in the DOM.

Mastering Angular course lecture demonstrates binding various mouse events, including double click, mouseover, mouseleave, mousedown, mouseup, drag, and dragover, to update a counter in the UI through interactive examples.

Implement keyboard events in an input field, including key press, keydown, keyup, and enter-triggered actions. Explore focus, select, copy, paste, blur, and cut events to support validation and search features.

Explore how the Angular event object, a reserved keyword, passes event details from template to component, enabling access to e.target.value and switching from keypress to keyup for full input.

Implement shift.y detection in an Angular input by binding keydown with the shift.y modifier and by using the event object's shiftKey and key properties to trigger a message.

Master two way binding in Angular using ngModel from the FormsModule to sync data between the component and template, reflecting input changes in real time.

Explore two-way binding in Angular by capturing an input field value on button click, binding with ngModel, and displaying the dynamic value via interpolation after importing the forms module.

Create an Angular counter with two buttons for increment and decrement, display the count via interpolation, initialize to zero, implement a TypeScript function using a ternary operator, with CSS styling.

Learn to use the Angular CLI to initialize, develop, scaffold, and test Angular apps from the command shell, install Node.js and npm, and verify ng version for a streamlined workflow.

Learn to create a new Angular CLI project, select CSS, and enable SSR and SSG, plus explore the project structure.

Understand Angular's component architecture from the app component to child components. See how HTML, CSS, and TS form each component and how decorator metadata and routing enable single page applications.

Explore how Angular's component-based architecture builds blocks that communicate, each with HTML, TypeScript, and CSS, plus a testing file, and distinguish index HTML from the app component HTML.

Learn how to display dynamic messages in Angular components using interpolation; bind variables from TypeScript to HTML with double curly braces and update the title and message.

Explore angular interpolation by binding component data to the view with double curly braces, evaluate expressions (including ternary), concatenate strings, and handle null or undefined values as empty strings.

Display the sum of two numbers in an Angular component by declaring a and b, computing answer as this.a + this.b, and rendering it in the template.

Explore property binding in Angular by comparing interpolation vs property binding, binding non-string data to element properties, binding DOM attributes like aria-label, and binding multiple properties on a single element.

Create a simple Angular counter with increment and decrement buttons, display the count using interpolation, and handle button clicks with a TypeScript function using a ternary conditional.

Learn about the angular event object, the dom event passed to handlers for click, keydown, and input, access values via event.target.value, prevent default actions, and pass extra arguments.

Learn how to detect shift plus y in an Angular app with key event binding using modifiers, or by checking the event object's properties.

Demonstrates an assignment that uses the keydown event to increment and decrement a counter with the up and down arrow keys, binding state via interpolation and enabling focus with tabindex.

Master two-way binding in Angular by using the ngModel directive from the forms module to synchronize data between the component class and HTML view, with static and dynamic input examples.

Explore two-way binding with ngModel, its role in template-driven forms, and how property and event binding differ, while spotting pitfalls and performance considerations.

Master two-way binding to capture and display an input field value on button click using ngModel and the Angular forms module.

Master two-way binding in Angular by linking a quantity input to a quantity property and computing total price from price per item, with min zero and live updates.

Learn about Angular directives, including structural, attribute, and component directives, and how built-in directives like ng model enable two-way binding, with examples and the concept of custom directives.

Explore structural directives with ngIf to conditionally render or remove elements from the dom, using true/false and comparisons like greater than, less than, and equal to zero.

Learn to implement show and hide functionality using the ngIf directive in Angular by toggling a display flag with a button click, including an inline negation approach.

Use the Ng4 directive to iterate an array of objects, display each value’s id and name with interpolation, and repeat a division for every item, simplifying over traditional loops.

Assignment demonstrates displaying a list on button click using ngFor and ngIf, iterating an array of items with name and age, and toggling visibility with a show flag.

Master NG17's built-in for loop control flow, replacing ng if and ng switch, enforce track by with the for statement for safe iteration and empty keyword handling.

Learn how the ngSwitch structural directive renders elements based on conditional cases and a default case. See dynamic view updates as age conditions change.

Implement age validation with ngSwitch in the html, bind input with ngModel, and run check eligibility to show 'you are eligible to vote' or 'you are not eligible to vote'.

Drive dynamic styling with attribute directives like ngClass to apply or remove css classes conditionally, using strings, arrays, or objects, and link class values to component css and TypeScript.

Create a toggle for light and dark modes using ngClass, css styles, and a button with a click event, updating the color mode and button text accordingly.

Learn to use the ngStyle attribute directive to apply dynamic inline css in Angular, using variables and object literals to control color, font size, and font style for interactive styles.

Apply ngStyle to dynamically color input fields based on content, validate email in real time, and reveal a submit message using ngIf and form state in an Angular form.

Learn how ng-container groups elements without rendering extra dom nodes, enabling wrappers for ngFor and ngIf, showing a subject list without unnecessary divs.

Learn how the template directive creates a reusable block of code, accessed via a reference variable, with ng container and ng template for conditional rendering and iteration.

Distinguish ng-template and ng-container by explaining that ng-template defines a reusable content template rendered only under certain conditions, while ng-container wraps grouped elements and renders them in the dom.

Implement a conditional message using ng container and ng template to display a message when the input field is empty, by binding a user variable and applying styling.

Render templates dynamically in Angular with the ngTemplateOutlet directive inside an ng-container, using a context object and let syntax to display messages and data.

Learn how to render templates with ngTemplateOutlet using the dollar implicit property to provide a default context, enabling let-based access to data such as employees in a table.

implement html for a simple portfolio builder that shows a ready-to-edit template on submit, with a form collecting personal information and qualifications, and a live preview.

Apply CSS to the portfolio form: set universal selector font family, center the H1, and create a flex layout with 80% width and a preview container featuring an edit button.

Bind inputs in Angular using ngModel to collect name, email, and qualifications, and render multiple qualification entries with ngFor, enabling a live preview and edit before submission.

Discover how an Angular component automatically traverses its lifecycle, from constructor to eight phases, with hooks like ngOnInit, ngOnChanges, and ngDoCheck driving initialization and updates.

Learn how the ngOnChanges hook detects and responds to changes in input properties of an Angular component, with practical examples of SimpleChanges, current and previous values.

Explore how the simple changes object tracks input property changes in Angular by capturing previous and current values in ngOnChanges.

Learn how ngOnInit, via the OnInit interface, runs once after a component initializes to set up properties or make API requests. The constructor runs earlier, so avoid lifecycle tasks there.

Explore ngDoCheck for custom change detection when OnChanges misses bound input changes. Implement a component that tracks user.name and logs the change, and avoid mixing OnChanges with DoCheck.

Explore the ngaftercontentinit hook and how content projection via ng-content transfers html from parent to child, triggering once during projection with practical examples and the roles of viewchild and contentchild.

Learn how the ngAfterContentChecked hook runs after content projection and is invoked on every change detection cycle. Implement it to handle validation, debugging, and to understand potential performance risks.

Learn how the ngAfterViewInit hook runs after a component and its template are initialized in the dom, enabling dom manipulation via ViewChild decorator and ElementRef, with contrast to ngOnInit.

Observe how Angular's after view checked hook runs after the component and child views are checked on every change detection cycle, with a random-number example and console outputs.

Discover how the ngDestroy hook cleans up a component before destruction, including removing local storage information, stopping timers, and preventing memory leaks, with a practical toggle demonstrating initialization and destruction.

Explore decorators in Angular, learning how they attach metadata to component classes using the @ prefix, functioning as code logic, and exposing class, property, method, and parameter decorators.

Learn how the NgModule decorator marks a class as a module with metadata such as declarations, imports, providers, and bootstrap to organize components, directives, modules, and services.

The class decorator marks a class as an Angular component and provides metadata like selector, template URL, and style URLs; additional properties include template, styles, animations, and pipes.

Property decorators add metadata to class properties; the input decorator marks a property to receive data from the parent component and binds changes to the child component.

Pass a courses array from parent to child with the @Input decorator, then render it in a table (ID and name) and display it as json using the json pipe.

Use the output decorator and event emitter to pass data from child to parent in Angular, emitting a string payload as a custom event and handling it with event binding.

Learn how to share data between a parent and child component in Angular using @Input and @Output, adding and removing items with event emitters and lifecycle hooks.

Learn how the view child decorator retrieves references to child components and dom elements, enabling inter-component calls and dom manipulation after view init.

Learn how content child accesses content projected into a component, unlike view child, and implement styling via ngAfterContentInit to apply italic font, font weight, and color.

Bind properties on the host element using the host binding decorator in Angular, with examples in a custom directive to style background and text colors and respond to change detection.

Bind methods to host events with the host listener decorator to trigger actions on the host element. Update background and text colors on click, using random color logic for behavior.

Implement a color picker to dynamically update a division's background color via host binding and host listener, using view child and after view init.

Explore parameter decorators in Angular to inject services and provide metadata within a component's constructor, illustrating dependency injection and how decorators supply dependencies.

Explore Angular pipes, the template binding feature that transforms data using built-in pipes. See examples of uppercase, lowercase, and date pipes, and learn how pipe order affects output.

Implement built-in pipes to format employee data in a table, using title case, slice, and currency pipes. Render with ngFor directive and apply styling.

Learn how the Angular slice pipe extracts a subset from strings and arrays using start and end positions, including negative indices, with practical string and array examples.

Implement a page navigation feature using the slice pipe in Angular, displaying four products per page and wiring previous and next controls to update start and end indices.

Implement page navigation for a product grid using the slice pipe with NgFor, displaying products as cards and enabling button states that disable at bounds.

Explore how the number pipe formats numeric values in angular, controlling digits before and after the decimal, max length, and rounding, with examples using 110 and pi.

Build a pound-to-kilogram converter in Angular with TypeScript, binding user input via ngModel, converting pounds to kilograms using 0.453592, and formatting output with a number pipe.

Discover how the json pipe converts an object literal to a json string for debugging and display, with examples using uppercase pipe, and learn caution about exposing data in production.

Learn to convert table data to Json string in an Angular TypeScript app by iterating with the Ngfor directive, binding a toggle button, and displaying Json via the Json pipe.

Create custom pipes in Angular by defining the transform method and using the pipe decorator, then implement an append text example to transform template data.

Create a custom Angular pipe sort numbers to sort numeric arrays in ascending or descending order using a union type ASC | DSC, returning an array without altering the original.

Create a custom Angular pipe named letter count that uses a transform method to count letters in a string and displays the result in the template, while ignoring whitespace.

Build a count pipe to transform a counter value and log it in the console, showing pure pipes run on input changes while impure pipes run on change detection cycles.

Master the use of impure pipes by building a custom sum numbers pipe, showing how it updates a changing array on every change detection when pure pipes cannot modify input.

Master angular routing to navigate between components, including generating an app routing module with the Angular CLI, configuring the router and routes, and integrating the routing module into AppModule.

Understand how to configure Angular routing by defining a routing file, importing the NgModule and RouterModule, and mapping paths to components for export across modules.

Create a home component and define the home route in the routes array, mapping the path home to the home component. Use router outlet to display its content.

Bind links to routes using the routerLink directive to navigate between views, apply it to anchors or any clickable element, updating the URL and rendering the target component.

Create a simple navbar using routes by defining paths for home, about, work, news, services, and contact, with router links and a router outlet, plus styling.

Master dynamic routing in angular by passing route parameters, capture values like name and id, and render them with a router outlet while contrasting static routing.

Learn how to use wildcard routes in Angular to display a 404 page for undefined URLs, using the double asterisk and optional redirect to predefined routes.

Master nested routes in angular by defining a parent and multiple child routes using the children property, leveraging router outlet to render nested views and enable multi-level navigation.

Create a multi-level menu in Angular by nesting routes for home, about, and products with shirts, pants, and shoes as child routes, using a dropdown navigation and common CSS.

Explore how to implement route redirection in Angular using redirectTo, empty paths, and pathMatch to route to shirts, home, or a wildcard fallback.

Explore how forRoot defines the root router configuration for the entire application and how forChild adds module-specific routes, reusing the same router service across modules.

Understand how to fetch route parameters with ActivatedRoute in Angular by accessing id and name via route snapshot params, using dependency injection, and displaying them in the template and console.

Explore how to pass and read query parameters in Angular routing by using the activated route and its queryParams property, then subscribe to changes and bind them with router links.

Build an angular course detail view that displays course data when a course name is clicked and fetches id, name, and price from url query parameters via the activated route.

Learn how Angular services provide reusable logic, enable dependency injection, and share data across components to fetch and display employee details through a simple example.

Inject dependencies into components using constructor injection to reuse services across the app. Learn how to declare providers and the injectable decorator to enable Angular dependency injection for reusable code.

Explore how to register providers at module, service, and component levels to control dependency injection in Angular, creating singleton versus multiple service instances with power and cube examples.