Install and verify your Angular development environment by installing Visual Studio Code, Node.js, and the global Angular CLI. Then check versions with node -v and npm.

Create your first Angular project using ng new my-app and answer configuration questions. Then run ng serve to compile and view the app at localhost:4200, confirming your environment is ready.

Explore the angular project structure, from node modules to the source folder, and learn how angular.json and package.json define dependencies and development versus production environments.

Learn how to create a simple hello world app in Angular by editing the app component HTML, viewing live output, and leveraging automatic recompilation on save.

Explore string interpolation in angular by binding a TypeScript variable to the template with double curly braces, see dynamic name updates and how HTML and TypeScript communicate.

Learn how HTML and TypeScript communicate in an Angular app by building a languages list with add and delete actions and event binding from an input field.

Install and configure the prettier code formatter in vscode, set it as the default formatter, and use format document to auto-indent, with optional extensions such as material icon theme.

Learn how to manage a list of languages in an Angular app by using two-way binding with ngModel, importing forms module, and pushing new entries to the language array.

Demonstrates using the ngFor structural directive to render a list of languages from an array as individual list items with string interpolation in an unordered list.

Learn to conditionally display messages in Angular using *ngIf based on array length, and understand how *ngFor and *ngIf as structural directives dynamically alter HTML.

Learn to delete the first element of an array in Angular by wiring a delete first button to a splice(0,1) function, updating languages list and a congratulation message that disappears.

Create small Angular projects to understand concepts like components, services, and routing through practical implementation. Download the project copy, install libraries, run it, and compare your code with mine.

Explore how an Angular app is structured from components, each with its own html, css, and typescript, starting with app-root and composing header, post-list, add post, and sign-in/sign-up components.

Identify five components for the Angular project: header, post list, post, post edit, and auth, each with distinct responsibilities like menu display, post rendering, editing, and login signup.

Create a new Angular project named live-posts with ng new, then run ng serve to view the app on localhost:4200.

Create a new header component with ng generate component header, generating html, css, ts, and spec files, and updating app.module.ts to register the component within the module.

Create and organize five components—post-list, post, post-edit, auth, and the root app component—using ng generate component to practice Angular concepts step by step.

Download the course project zip, extract it, open the folder in VS Code, run npm install to create node_modules, then execute ng serve to view the app at localhost:4200.

Learn to set up and display a header component in an Angular single-page app by creating the app-header component, using its selector in app-root, and rendering the header.

Enhance the header component by implementing a responsive bootstrap navigation bar with collapse for mobile, ensuring proper bootstrap CSS and JS links and JQuery integration for a polished, functional header.

Learn to customize the header menu by removing unused links, updating the project name to live-posts, and adding an add-post option with home, login, and signup items.

place the post-list component beneath the header in the app-root by allocating space for it, and use the app post list selector to render and verify the post-list works.

Open the post-list component, set a heading for the latest posts, and render multiple post components to display post titles, descriptions, images, author, date, and time.

Improve the post component by rendering title, description, image, author, and date with edit/delete actions, using bootstrap and responsive images, then enable dynamic posts via the post list.

Create a post model in Angular by exporting a post class in post.model.ts, using a TypeScript constructor shortcut to define title, description, image path, author, and date created.

Create and populate a post-list component with an array of post objects by importing the post model, then include title, description, image path, author, and date, using camel-case naming.

Pass data from the post-list component to post components using the @Input decorator, binding the 0th position data, first position data, and second position data, and verify with ngOnInit.

Learn to display data received by a post component from a parent, using string interpolation and optional input handling, as components render post title, description, image path, author, and date.

Explore how the @Input decorator in Angular converts a normal class member into input, giving it a new identity and enabling it to serve as input to a component.

Learn to decouple data handling from ui by using a post service in angular. Let the post-list component display the posts while the service handles add, delete, and edit.

Inject the post service into the post-list component to establish an initial connection and access post operations, then enhance the service with get all, add, delete, and edit functionality.

Enhance the post service by adding four facilities—get post, delete post, add post, and update post—using an index to manage and retrieve the list of posts.

learn how the this keyword references class data, using this.listOfPost in the post service to indicate scope and access members inside the class.

Learn how to fetch and display posts in Angular by wiring a post service into ngOnInit, using get post, binding to a post list, and verifying data flow.

Connect the delete button in the post component to the post service, call delete post with an index or object, and verify the function call via the console.

Identify bug in delete post where the function always uses index 0, deleting the first post; pass the actual index of the selected post to ensure correct deletion.

learn how to pass and use the correct index in angular's ngfor to delete posts from an array, through the post component and post service, with console verification.

This lecture introduces Angular routing, showing how routing displays different components like post-list, post-edit, and auth based on user actions such as add post or login.

Define Angular routes in the module, import the router module with forRoot, and use a router outlet to dynamically render auth, post-list, and post-edit components.

Address routing issues by replacing hrefs with Angular routerLink in the header to navigate to post-list, post-add, and auth, and set post-list as the default view when no path.

Configure Angular routes to redirect an empty path to the post-list component using redirectTo and pathMatch. This avoids double rendering and sets the home page as the redirect target.