Angular from Zero to Hero

Install the development environment by setting up Node.js and npm, then install the Angular CLI; Node.js runs JavaScript outside the browser and npm manages dependencies.

Install Angular CLI via npm to scaffold projects, run a development server, optimize builds, and manage tests and configuration with angular.json.

Learn to set up an Angular workspace using the Angular CLI, create a project with ng new, choose routing and CSS styles, and understand the project structure and npm installation.

Explore the generated Angular project structure, from node_modules and the source folder to the app module and routing, and understand how global styles apply via styles.css.

Explore the package.json and package-lock.json, learn how to run npm scripts, and manage dependencies in an angular project. Understand dependencies vs dev dependencies and why package-lock.json matters for team consistency.

Learn how the angular.json configuration file, generated by the angular cli, defines project settings for build, serve, test, i18n, and for assets, styles, and production versus development configurations.

Learn how an angular app bootstraps by using the app module and app component. Explore declarations, imports, providers, and bootstrap to configure modules, routes, and the startup component.

Explore how an Angular app boots from index.html and main.ts, bootstrapping the app module via platformBrowserDynamic and bootstrapModule, with console.error error handling and lifecycle rendering of the app component.

Run the application with ng serve or npm run start and inspect the Angular CLI output at localhost:4200. Explore component creation, two-way data binding, and cleaning up the starter UI.

Understand how Angular components are the fundamental building blocks that encapsulate UI and behavior, with template defining UI, class holding TypeScript logic, and metadata decorators for selectors, styles, and dependencies.

Generate a new component with the Angular CLI, creating the class, template, style, and unit tests, then bind data and events using input and output properties.

Explore Angular component lifecycle hooks that run at creation, updates, and destruction, using ngOnInit for initialization and data fetching, ngOnChanges for input changes, and ngOnDestroy for cleanup and unsubscribing.

Create and understand an Angular component using the CLI, generating html, css, ts, and spec files, declare it in app.module.ts, and configure its selector, template, and styles.

Embed one Angular component inside another by using the component selector tag. The demo shows my first comp displayed within the app component with automatic reload.

Demonstrate two-way data binding in Angular by linking a form’s name, email, and message fields to component variables using ngModel, and display live data via interpolation.

Learn to handle events in Angular by wiring ng submit and click events on forms, console logging input data, and toggling submit button types to control form submission.

Learn how to use the NgIf directive to conditionally render form data, toggle blocks with a boolean isSubmitted, implement onSubmit, two-way binding, and display submitted data in a dynamic table.

Implement the NgFor directive to render a table from a messages array in Angular, pushing new objects with name, email, and message on submit, and display an auto-incremented index.

Learn how Angular enables parent–child data flow with input and output properties; define input with the input decorator and output with the output decorator to emit and listen to events.

Explore passing data from a parent to a child in Angular with @Input, building a message details component to show name, email, and message, and rendering messages with loop directive.

Learn to wire a delete button that communicates from child to parent, passing an index to remove an item from a list in an Angular app.

Master the @Output pattern in Angular by wiring a child component to emit delete events via an event emitter, passing an index and updating the parent user interface with splice.

Learn how Angular services are reusable, injectable classes that provide data retrieval, business logic, and shared state to components via dependency injection, while abstracting implementation details to keep components lean.

Explore how dependency injection in Angular manages creation and injection of services into components, boosting modularity, reusability, testability, and loose coupling.

Learn to create an Angular service with the CLI, inspect the generated files, and understand the injectable decorator and providedIn options (root, any, module, null) for dependency injection.

Implement the first service to manage an in-memory messages store, with insert, get all messages, and delete methods, seed initial data with init, and call it from the constructor.

Learn how to inject a service into an Angular component using constructor and property injection, with constructor injection as the most common approach and its use cases.

Declare the service as a property in a component and inject it with the inject method from the Angular core package, enabling dependency injection to assign the service instance.

Learn how constructor injection works again in Angular and fix a null injector error by providing the first service in the app module providers.

Configure Angular routes with the routing module by mapping paths to components, enabling navigation between views without full page reloads, and wiring the app module with a router outlet.

Learn how to use the router outlet as the content viewport for the active route in an Angular app, and navigate with router link and programmatic router service.

Create a menu component in Angular using the CLI, wire home and about links, integrate it into the app component, and explore routing to navigate between pages.

Create the about page by building an about component in Angular, include HTML and CSS from the source code, and set up routes to navigate between components.

Create routes and navigate between pages using the Angular router, defining home and about paths with their components. Use routerLink for link-based navigation and the router service for programmatic navigation.

Learn to pass and read path and query parameters in an Angular app. Create a route with a path variable, inject activated route, and display it on the about page.

Learn to pass and read query parameters in Angular on the about page using activated route snapshot and queryParams. See how the course value updates when you change the parameter.