Angular Fundamental Course for Absolute Beginners 2022

Angular is a component based frontend framework where components combine data exchange and templates to render views in the browser, enabling reusable post and sidebar components for a Facebook layout.

Learn to create an Angular component by building a notebook component, importing it into the root app, decorating with a selector and template, and registering it in the module.

Explore how Angular loads and renders components in the browser by using the app component and its selector to mount nested components like notebook, revealing component structure through browser inspection.

Learn how an Angular component uses a selector to render templates in the browser, apply template and styles properties, and write multi-line templates with backticks.

Move inline mockups into separate template and style files to reduce code noise and improve readability. Link external files to the component and follow naming conventions for maintainable Angular UI.

Generate a component using Angular CLI to scaffold files for a new component. Add the component selector to the app component to render it in the browser.

Master string interpolation in Angular to display component data using a TypeScript variable within the template. Learn how the Angular compiler renders messages in the browser with interpolation.

Learn how to bind dynamic values in Angular using property binding, compare it with string interpolation, and implement a cleaner approach to display images in templates.

Bind a class conditionally in Angular to apply a red text color based on a boolean value, using class binding alongside property binding to toggle styles.

Learn style binding in Angular by applying conditional text color through a style object and inline ternary expressions, demonstrating how boolean values affect element styling.

Learn how Angular event binding uses the (click) binding to call a TypeScript method, define button click handling, and verify the event output in the browser console.

Learn two-way data binding in angular by binding an input field to a component variable with ngModel, after importing forms module, and log the username to the console.

Explore how Angular directives manipulate the DOM and extend components, including component, structural, attribute, and custom directives; learn how structural directives add or remove elements to change layout and behavior.

Learn to render dynamic lists in Angular using the ngFor directive by iterating over a posts array, printing values by index with interpolation, and avoiding hard-coded lists.

Leverage ngFor to fetch and display an object array in Angular by creating sample objects with id and post title, then format with the json pipe to show structured data.

Discover how to remove an array item in Angular using the ngFor index. Replace manual index extraction with the ngFor index parameter to pass to the removal method.

Use the ngIf directive to conditionally render a list when the data array has items and show a no-data message when the array length is zero.

Explore how Angular routing navigates between components, using URLs like /features and /docs to display the corresponding components.

Set up a new Angular app using ng new, then navigate to the project folder, select a styling method, and open the code in the editor to explore routing basics.

Configure Angular router to navigate to a post list component by registering the router module and defining routes with path and component, then load the post list in the browser.

Learn to use the Angular router outlet to render routed components, such as the post list and post component, enabling navigation between views within the app.

Use the routerLink directive to navigate to the post list route when clicking a button, loading the list component via Angular routing.

Define the base href to enable Angular router navigation and load the main route component, ensuring the home button and post list routes work from the app component without errors.

Define and set up a base router, create and link a new component, and verify the home and post components load correctly in the app.