Angular: From Beginner to Advanced

Explore how NgModule gathers a feature's dependencies by grouping components and services, using the NgModule decorator to declare components, import modules, provide services, and bootstrap the root component.

Bootstraps the Angular app via main.ts by importing platform browser dynamic and bootstrapping the root AppModule. Enable production mode based on environment to suppress checks in production.

Explore how components serve as the building blocks of Angular applications, defining views, styles, and functionality. Learn to use the component decorator, selector, template, and styles for dynamic UI.

Learn to create a feature module in Angular, declare and export a hello component, import the module into the app, and render the hello component in the root view.

Generate and add a name component to the hello feature module, export it for app-wide use, and manage imports and declarations via the command line interface.

Explore Angular event binding with keyup on input, bind to onType, access event.target.value, and use type casting and template reference variables to manage inputs.

Explore using template reference variables to access input values, apply event binding, and display results via interpolation, while simplifying code for improved performance.

Learn how to pass data into Angular components by using the input decorator, binding inputs between parent and child components, and adopting a presentational vs smart component pattern.

Explore how name components pass input via template references, define outputs with EventEmitter, and listen to output events to update the display, using input decorators, event binding, and component interaction.

Learn how ngModel enables two-way binding and form state in template-driven forms, import the forms module, and bind inputs with brackets and events to pass values to components.

Master Angular structural directives with ngFor to iterate over a names array and display each item, binding name and age in a list.

Use ngIf to conditionally display data in a list by even or odd index, using ngFor to iterate and ngIf else syntax to switch between templates.

Learn to use NgIfElse in Angular to conditionally render items based on even or odd, using ng-template and template references to create custom structural directives.

Explore ng-template and long-form directives in Angular, learn how templates act as runtime placeholders, and how the asterisk shorthand expands into ngFor and ngIf for dynamic content rendering.

Explore NgSwitch, a structural directive in Angular, to render content based on a person’s job with cases for software developer and testing, plus a default case and background color styling.

Explore styling with ngStyle in Angular by converting inline styles to an object, applying conditional and dynamic CSS properties like background color, border, padding, and box shadow.

Explore dynamic styles by toggling element visibility with a style object, setting initial visibility, and implementing a 1-second interval to switch between visible and hidden for headings and content.

Apply ngClass in Angular to conditionally toggle heading styles by defining CSS classes, binding to component state, and using click events to add or remove the heading class.

Explore Angular lifecycle hooks and learn to hook into events such as initialization, changes, and destruction by importing and implementing the lifecycle interfaces, and using console logs to observe them.

Explore how to communicate between parent and child components using the ViewChild decorator in Angular, enabling access to child methods and properties to toggle and display content.

Learn to use @ViewChildren to access a list of name components created multiple times, bind inputs, and manage them with a QueryList after the view initializes.

Explore content projection by injecting dynamic templates into a component, enabling multiple templates for the same component. Pass names as inputs to render three distinct templates and see flexible rendering.

Learn how content child enables access to projected content in Angular, use after content init to log and interact with named components, and compare with view child.

Master content children in Angular by building a query list of name components, accessing each child, and logging names to demonstrate content projection basics.

Learn dependency injection and service providers to create loosely coupled Angular applications by injecting a names service through a constructor and sharing the names array.

Explore configuring Angular module providers to share a names service across an app, compare root versus feature module providers, and understand how to maintain state across navigations.

Learn to implement the NamesService that exposes a string array of names, share it across components, display a name on screen, and note a limitation about injecting dependencies in constructors.

Learn how to inject dependencies into an Angular service using the @Injectable decorator, resolve no provider errors by wiring providers, and follow injectable best practices even when no dependencies exist.

Explore how Angular pipes transform data in a view, focusing on the DatePipe to format strings into friendly dates and times with optional parameters.

Learn to format prices with Angular's currency pipe, pass currency parameters like GBP, and toggle between symbol and code for currencies such as USD and EUR.

Explore how to use the json pipe in Angular to display an object's keys and values, demonstrate binding a person object, and understand how pipes alter display.

Discover how the lowercase pipe in Angular applies a transformation in templates to render text in all lowercase without changing the original value.

Learn how to use the uppercase pipe in angular to transform text to uppercase without changing the original value, illustrated with Paul Holliday.

Resolve promises in two ways—then and async/await—and display the value with the async pipe in an angular component; the lesson also previews resolving observables in the next leg.

Learn to convert a promise to an observable, create and subscribe to an observable, and leverage the async pipe to manage subscriptions automatically in Angular.

Create a custom reverse string pipe in Angular, declare it in a shared module, export it, and import the shared module to use the pipe across components.

Explore building an Angular app using code modules, shared modules, and feature modules. Route views with forward and backward navigation, and apply the Flex layout module and Material design.

Create a new Angular project from the command line, install core dependencies such as @angular/animations, @angular/cdk, @angular/material, and @angular/flex-layout, then run and view the app in the browser.

Create a shared module to host common items, import the flex layout and material toolbar modules, and apply the deep purple prebuilt theme to style a clean, responsive toolbar.

Build a responsive search form in Angular using flex layout and material design, with an input field and a raised accent button, and hook it up to an HTTP client.

Angular form validation with FormControl and Validators, export FormsModule and ReactiveFormsModule in a shared module, and display on-screen errors like 'username is required' when the control is dirty.

Configure Angular routes with a feature module for lazy loading, define the empty path and search route, and add a page not found component with browser animations for Material Design.

Learn to structure an Angular app by creating core and code modules, add a page not found route, and implement feature modules with lazy loading.

Create a feature module named Get help with two components, Get help search and Get help detail, using Angular CLI in the modules folder and add routing to the module.

Configure get hub routes in an Angular feature module using forChild to define child routes for a default search component and a detail component, implementing lazy loading for on-demand navigation.

Learn how to navigate between routes in Angular using routerLink and the router navigate method, including passing form values and validating input on the search page.

Create an Angular health service to call the API with HTTP requests, inject the HttpClient, and return typed user information as an observable using an interface.

Define a core module with a forRoot static function to ensure a single instance. Return the code module with current providers and expose getHelpService for consistent injection.

Learn how to import the core module once in Angular, using Optional and SkipSelf decorators to detect a parent module, preventing multiple imports and ensuring a single service instance.

Access route parameters in Angular by injecting ActivatedRoute, retrieve id from route snapshot, and use a service to fetch data, with console logging.

Create a user model and convert API responses to a user interface, then type the observable as Observable<User> to display login id, avatar, and role in the detail component.

Develop a card detail interface in Angular that uses ng templates and a material progress spinner to display a user's alias, company, and avatar while loading.

Explore multiple ways to handle the back button in angular, including using the location service to go back one step and declarative router link with an empty route.

Implement and register a http interceptor in Angular to intercept requests, forward them via next.handle, and optionally log, modify headers, and attach a public API key for authentication.

Generate and copy a personal access token, then set the authorization header in a new request via the http interceptor to authenticate api access and preview unauthorized handling.

Capture HTTP errors with observables, identify responses like unauthorized or error events, and surface them to users using a material snack bar in Angular.

Learn to build your Angular app for production using a production build and deploy it to the web with five best tools; the dist folder contains the app bundle.

Deploy your Angular app to Firebase hosting by installing Firebase tools, logging in, creating a project, configuring a public directory, and deploying with firebase deploy.

Angular concepts with a practical project using the Get help API to fetch user repositories, lazy loading, routing, and Firebase deployment for a polished user experience.