• Sign Out
  • Tutorials
    • Javascript
      • Chapter 1
        • Introduction
    • AnguarJs
    • Oracle
  1. Application
  2. Gallery

Tutorial

  1. Home
  2. Tutorials
  3. AnguarJs
  4. Videos

1.1. Course Introduction

1.2. What is Angular

1.3. Angular vs Angular 2 vs Angular 8

1.4. Project Setup and First App

1.5. Editing the First App

1.6. The Course Structure

1.7. How to get the Most out of the Course

1.8. What is TypeScript

1.9. A Basic Project Setup using Bootstrap for Styling

2.1. Module Introduction

2.2. How an Angular App gets Loaded and Started

2.3. Components are Important!

2.4. Creating a New Component

2.5. Understanding the Role of AppModule and Component Declaration

2.6. Using Custom Components

2.7. Creating Components with the CLI & Nesting Components

2.8. Working with Component Templates

2.9. Working with Component Styles

2.10. Fully Understanding the Component Selector

2.11. [OPTIONAL] Assignment Solution

2.12. What is Databinding

2.13. String Interpolation

2.14. Property Binding

2.15. Property Binding vs String Interpolation

2.16. Event Binding

2.17. Passing and Using Data with Event Binding

2.18. Two-Way-Databinding

2.19. Combining all Forms of Databinding

2.20. [OPTIONAL] Assignment Solution

2.21. Understanding Directives

2.22. Using ngIf to Output Data Conditionally

2.23. Enhancing ngIf with an Else Condition

2.24. Styling Elements Dynamically with ngStyle

2.25. Applying CSS Classes Dynamically with ngClass

2.26. Outputting Lists with ngFor

2.27. [OPTIONAL] Assignment Solution

2.28. Getting the Index when using ngFor

3.1. Project Introduction

3.2. Planning the App

3.3. Setting up the Application

3.4. Creating the Components

3.5. Using the Components

3.6. Adding a Navigation Bar

3.7. Creating a Recipe Model

3.8. Adding Content to the Recipes Components

3.9. Outputting a List of Recipes with ngFor

3.10. Displaying Recipe Details

3.11. Working on the ShoppingListComponent

3.12. Creating an Ingredient Model

3.13. Creating and Outputting the Shopping List

3.14. Adding a Shopping List Edit Section

3.15. Wrap Up & Next Steps

4.1. Understanding Angular Error Messages

4.2. Debugging Code in the Browser Using Sourcemaps

4.3. Using Augury to Dive into Angular Apps

5.1. Module Introduction

5.2. Splitting Apps into Components

5.3. Property & Event Binding Overview

5.4. Binding to Custom Properties

5.5. Assigning an Alias to Custom Properties

5.6. Binding to Custom Events

5.7. Assigning an Alias to Custom Events

5.8. Custom Property and Event Binding Summary

5.9. Understanding View Encapsulation

5.10. More on View Encapsulation

5.11. Using Local References in Templates

5.12. Getting Access to the Template & DOM with @ViewChild

5.13. Projecting Content into Components with ng-content

5.14. Understanding the Component Lifecycle

5.15. Seeing Lifecycle Hooks in Action

5.16. Lifecycle Hooks and Template Access

5.17. Getting Access to ng-content with @ContentChild

5.18. Wrap Up

5.19. [OPTIONAL] Assignment Solution

6.1. Introduction

6.2. Adding Navigation with Event Binding and ngIf

6.3. Passing Recipe Data with Property Binding

6.4. Passing Data with Event and Property Binding (Combined)

6.5 Allowing the User to Add Ingredients to the Shopping List

7.1. Module Introduction

7.2. ngFor and ngIf Recap

7.3. ngClass and ngStyle Recap

7.4. Creating a Basic Attribute Directive

7.5. Using the Renderer to build a Better Attribute Directive

7.6 Using HostListener to Listen to Host Events

7.7. Using HostBinding to Bind to Host Properties

7.8. Binding to Directive Properties

7.9. What Happens behind the Scenes on Structural Directives

7.10. Building a Structural Directive

7.11. Understanding ngSwitch

8.1. Building and Using a Dropdown Directive

9.1. Module Introduction

9.2. Why would you Need Services

9.3. Creating a Logging Service

9.4. Injecting the Logging Service into Components

9.5. Creating a Data Service

9.6. Understanding the Hierarchical Injector

9.7. How many Instances of Service Should It Be

9.8. Injecting Services into Services

9.9. Using Services for Cross-Component Communication

9.10. [OPTIONAL] Assignment Solution

10.1. Introduction

10.2. Setting up the Services

10.3. Managing Recipes in a Recipe Service

10.4. Using a Service for Cross-Component Communication

10.5. Adding the Shopping List Service

10.6. Using Services for Pushing Data from A to B

10.7. Adding Ingredients to Recipes

10.8. Passing Ingredients from Recipes to the Shopping List (via a Service)

11.1. Module Introduction

11.2. Why do we need a Router

11.3. Setting up and Loading Routes

11.4. Navigating with Router Links

11.5. Understanding Navigation Paths

11.6. Styling Active Router Links

11.7. Navigating Programmatically

11.8. Using Relative Paths in Programmatic Navigation

11.9. Passing Parameters to Routes

11.10. Fetching Route Parameters

11.11. Fetching Route Parameters Reactively

11.12. An Important Note about Route Observables

11.13. Passing Query Parameters and Fragments

11.14. Retrieving Query Parameters and Fragments

11.15. Practicing and some Common Gotchas

11.16. Setting up Child (Nested) Routes

11.17. Using Query Parameters - Practice

11.18. Configuring the Handling of Query Parameters

11.19. Redirecting and Wildcard Routes

11.20. Outsourcing the Route Configuration

11.21. An Introduction to Guards

11.22. Protecting Routes with canActivate

11.23. Protecting Child (Nested) Routes with canActivateChild

11.24. Using a Fake Auth Service

11.25. Controlling Navigation with canDeactivate

11.26. Passing Static Data to a Route

11.27. Resolving Dynamic Data with the resolve Guard

11.28. Understanding Location Strategies

11.29. Wrap Up

12.1. Planning the General Structure

12.2. Setting Up Routes

12.3. Adding Navigation to the App

12.4. Marking Active Routes

12.5. Fixing Page Reload Issues

12.6. Child Routes Challenge

12.7. Adding Child Routing Together

12.8. Configuring Route Parameters

12.9. Passing Dynamic Parameters to Links

12.10. Styling Active Recipe Items

12.11. Adding Editing Routes

12.12. Retrieving Route Parameters

12.13. Programmatic Navigation to the Edit Page

12.14. One Note about Route Observables

13.1. Module Introduction

13.2. Analyzing Angular Observables

13.3. Getting Closer to the Core of Observables

13.4. Building a Custom Observable

13.5. Errors & Completion

13.6. Observables & You!

13.7. Understanding Operators

13.8. Subjects

13.9. Wrap Up

14.1. Improving the Reactive Service with Observables (Subjects)

15.1. Module Introduction

15.2. Why do we Need Angular's Help

15.3. Template-Driven (TD) vs Reactive Approach

15.4. An Example Form

15.5. TD Creating the Form and Registering the Controls

15.6. TD Submitting and Using the Form

15.7. TD Understanding Form State

15.8. TD Accessing the Form with @ViewChild

15.9. TD Adding Validation to check User Input

15.10. TD Using the Form State

15.11. TD Outputting Validation Error Messages

15.12. TD Set Default Values with ngModel Property Binding

15.13. TD Using ngModel with Two-Way-Binding

15.14. TD Grouping Form Controls

15.15. TD Handling Radio Buttons

15.16. TD Setting and Patching Form Values

15.17. TD Using Form Data

15.18. TD Resetting Forms

15.19. Introduction to the Reactive Approach

15.20. Reactive Setup

15.21. Reactive Creating a Form in Code

15.22. Reactive Syncing HTML and Form

15.23. Reactive Submitting the Form

15.24. Reactive Adding Validation

15.25. Reactive Getting Access to Controls

15.26. Reactive Grouping Controls

15.27. Reactive Arrays of Form Controls (FormArray)

15.28. Reactive Creating Custom Validators

15.29. Reactive Using Error Codes

15.30. Reactive Creating a Custom Async Validator

15.31. Reactive Reacting to Status or Value Changes

15.32. Reactive Setting and Patching Values

15.33. [OPTIONAL] Assignment Solution

16.1. Introduction

16.2. TD Adding the Shopping List Form

16.3. Adding Validation to the Form

16.4. Allowing the Selection of Items in the List

16.5. Loading the Shopping List Items into the Form

16.6. Updating existing Items

16.7. Resetting the Form

16.8. Allowing the the User to Clear (Cancel) the Form

16.9. Allowing the Deletion of Shopping List Items

16.10. Creating the Template for the (Reactive) Recipe Edit Form

16.11. Creating the Form For Editing Recipes

16.12. Syncing HTML with the Form

16.13. Adding Ingredient Controls to a Form Array

16.14. Adding new Ingredient Controls

16.15. Validating User Input

16.16. Submitting the Recipe Edit Form

16.17. Adding a Delete and Clear (Cancel) Functionality

16.18. Redirecting the User (after Deleting a Recipe)

16.19. Adding an Image Preview

16.20. Providing the Recipe Service Correctly

16.21. Deleting Ingredients and Some Finishing Touches

17.1. Introduction & Why Pipes are Useful

17.2. Using Pipes

17.3. Parametrizing Pipes

17.4. Where to learn more about Pipes

17.5. Chaining Multiple Pipes

17.6. Creating a Custom Pipe

17.7. Parametrizing a Custom Pipe

17.8. Example Creating a Filter Pipe

17.9. Pure and Impure Pipes (or How to fix the Filter Pipe)

17.10. Understanding the async Pipe

18.1. A New IDE

18.2. Module Introduction

18.3. How Does Angular Interact With Backends

18.4. The Anatomy of a Http Request

18.5. Backend (Firebase) Setup

18.6. Sending a POST Request

18.7. GETting Data

18.8. Using RxJS Operators to Transform Response Data

18.9. Using Types with the HttpClient

18.10. Outputting Posts

18.11. Showing a Loading Indicator

18.12. Using a Service for Http Requests

18.13. Services & Components Working Together

18.14. Sending a DELETE Request

18.15. Handling Errors

18.16. Using Subjects for Error Handling

18.17. Using the catchError Operator

18.18. Error Handling & UX

18.19. Setting Headers

18.20. Adding Query Params

18.21. Observing Different Types of Responses

18.22. Changing the Response Body Type

18.23. Introducing Interceptors

18.24. Manipulating Request Objects

18.25. Response Interceptors

18.26. Multiple Interceptors

18.27. Wrap Up

19.1. Module Introduction

19.2. Backend (Firebase) Setup

19.3. Setting Up the DataStorage Service

19.4. Storing Recipes

19.5. Fetching Recipes

19.6. Transforming Response Data

19.7. Resolving Data Before Loading

19.8. Fixing a Bug with the Resolver

20.1. Module Introduction

20.2. How Authentication Works

20.3. Adding the Auth Page

20.4. Switching Between Auth Modes

20.5. Handling Form Input

20.6. Preparing the Backend

20.7. Preparing the Signup Request

20.8. Sending the Signup Request

20.9. Adding a Loading Spinner & Error Handling Logic

20.10. Improving Error Handling

20.11. Sending Login Requests

20.12. Login Error Handling

20.13. Creating & Storing the User Data

20.14. Reflecting the Auth State in the UI

20.15. Adding the Token to Outgoing Requests

20.16. Attaching the Token with an Interceptor

20.17. Adding Logout

20.18. Adding Auto-Login

20.19. Adding Auto-Logout

20.20. Adding an Auth Guard

20.21. Wrap Up

21.1. Module Introduction

21.2. Adding an Alert Modal Component

21.3. Understanding the Different Approaches

21.4. Using ngIf

21.5. Preparing Programmatic Creation

21.6. Creating a Component Programmatically

21.7. Understanding entryComponents

21.8. Data Binding & Event Binding

21.9. Wrap Up

22.1. Module Introduction

22.2. What are Modules

22.3. Analyzing the AppModule

22.4. Getting Started with Feature Modules

22.5. Splitting Modules Correctly

22.6. Adding Routes to Feature Modules

22.7. Component Declarations

22.8. The ShoppingList Feature Module

22.9. Understanding Shared Modules

22.10. Understanding the Core Module

22.11. Adding an Auth Feature Module

22.12. Understanding Lazy Loading

22.13. Implementing Lazy Loading

22.14. More Lazy Loading

22.15. Preloading Lazy-Loaded Code

22.16. Modules & Services

22.17. Loading Services Differently

22.18. Ahead-of-Time Compilation

22.19. Wrap Up

23.1. Module Introduction

23.2. Deployment Preparation & Steps

23.3. Using Environment Variables

23.4. Deployment Example Firebase Hosting

24.1. Module Introduction

24.2. What is Application State

24.3. What is NgRx

24.4. Getting Started with Reducers

24.5. Adding Logic to the Reducer

24.6. Understanding & Adding Actions

24.7. Setting Up the NgRx Store

24.8. Selecting State

24.9. Dispatching Actions

24.10. Multiple Actions

24.11. Preparing Update & Delete Actions

24.12. Updating & Deleting Ingredients

24.13. Expanding the State

24.14. Managing More State via NgRx

24.15. Removing Redundant Component State Management

24.16. First Summary & Clean Up

24.17. One Root State

24.18. Setting Up Auth Reducer & Actions

24.19. Dispatching Auth Actions

24.20. Auth Finished (For Now...)

24.21. And Important Note on Actions

24.22. Exploring NgRx Effects

24.23. Defining the First Effect

24.24. Effects & Error Handling

24.25. Login via NgRx Effects

24.26. Managing UI State in NgRx

24.27. Finishing the Login Effect

24.28. Preparing Other Auth Actions

24.29. Adding Signup

24.30. Further Auth Effects

24.31. Adding Auto-Login with NgRx

24.32. Adding Auto-Logout

24.33. Finishing the Auth Effects

24.34. Using the Store Devtools

24.35. The Router Store

24.36. Getting Started with NgRx for Recipes

24.37. Fetching Recipe Detail Data

24.38. Fetching Recipes & Using the Resolver

24.39. Fixing the Auth Redirect

24.40. Update, Delete and Add Recipes

24.41. Storing Recipes via Effects

24.42. Cleanup Work

24.43. Wrap Up

24.44. [LEGACY] Module Introduction

24.45. [LEGACY] State Challenges

24.46. [LEGACY] Getting Started with Reducers

24.47. [LEGACY] Adding Actions

24.48. [LEGACY] Finishing the First Reducer

24.49. [LEGACY] Registering the Application Store

24.50. [LEGACY] Selecting Data from State

24.51. [LEGACY] Dispatch Actions

24.52. [LEGACY] More Actions and Adding Ingredients

24.53. [LEGACY] Dispatching Update and Deleting Shopping List Actions

24.54. [LEGACY] Expanding App State

24.55. [LEGACY] Editing the Shopping-List via NgRx

24.56. [LEGACY] Managing all Relevant State

24.57. [LEGACY] Authentication and Side Effects - Introduction

24.58. [LEGACY] Setting up the Auth Store Files

24.59. [LEGACY] The Reducer

24.60. [LEGACY] Adding Reducer Logic & Actions

24.61. [LEGACY] Adjusting the App Module Setup

24.62. [LEGACY] Using Authentication

24.63. [LEGACY] Dispatch Actions

24.64. [LEGACY] Getting State Access in Http Interceptor

24.65. [LEGACY] Handling the Auth Token

24.66. [LEGACY] Only React to Actions Once via take(1)

24.67. [LEGACY] A Closer Look at Effects

24.68. [LEGACY] Auth Effects and Actions

24.69. [LEGACY] Effects - How they Work

24.70. [LEGACY] Adding Auth Signup

24.71. [LEGACY] Adding Auth Signin

24.72. [LEGACY] Navigation as a Side Effect

24.73. [LEGACY] Handling Logout via NgRx

24.74. [LEGACY] Additional Fixes

24.75. [LEGACY] Redirecting Upon Logout

24.76. [LEGACY] What's Next

24.77. [LEGACY] The Router Store Package

24.78. [LEGACY] Store Devtools

24.79. [LEGACY] Lazy Load and Dynamic Injection

24.80. [LEGACY] Adding Recipe Actions

24.81. [LEGACY] Adding Recipe Reducers

24.82. [LEGACY] Dispatching and Selecting State

24.83. [LEGACY] Viewing and Deleting Recipes via NgRx

24.84. [LEGACY] Editing and Updating Recipes via NgRx

24.85. [LEGACY] Recipes Side Effects - Fetching from Server

24.86. [LEGACY] Recipes Side Effects - Storing Recipes on Server

24.87. [LEGACY] Cleaning Up

24.88. [LEGACY] Updating to RxJS 6+

24.89. [LEGACY] Wrap Up

25.1. Module Introduction

25.2. Getting Started with Angular Universal

25.3. Working on the App Module

25.4. Adding a Server-Side Build Workflow

25.5. Adding a NodeJS Server

25.6. Pre-Rendering the App on the Server

25.7. Next Steps

26.1. Introduction

26.2. Setting up the Starting Project

26.3. Animations Triggers and State

26.4. Switching between States

26.5. Transitions

26.6. Advanced Transitions

26.7. Transition Phases

26.8. The void State

26.9. Using Keyframes for Animations

26.10. Grouping Transitions

26.11. Using Animation Callbacks

27.1. Module Introduction

27.2. Adding Service Workers

27.3. Caching Assets for Offline Use

27.4. Caching Dynamic Assets & URLs

28.1. Introduction

28.2. Why Unit Tests

28.3. Analyzing the Testing Setup (as created by the CLI)

28.4. Running Tests (with the CLI)

28.5. Adding a Component and some fitting Tests

28.6. Testing Dependencies Components and Services

28.7. Simulating Async Tasks

28.8. Using fakeAsync and tick

28.9. Isolated vs Non-Isolated Tests

29.1. What's New with Angular 8

30.1. Course Roundup

31.1. Introduction

31.2. Initializing the Project

31.3. Setting up the Basic Project Files

31.4. Installing the Core Dependencies

31.5. Filling the Project Files with Some Life

31.6. index.html & Polyfills

31.7. Installing Development Dependencies

31.8. Setting up a Development Workflow

31.9. Finishing & Using the Development Workflow

31.10. Setting up a Production Workflow

31.11. Adding Types & Fixing Bugs

31.12. Finishing Touches

32.1. Introduction

32.2. Using Types

32.3. Classes

32.4. Interfaces

32.5. Generics

32.6. Wrap up & Modules

2026 © Babyreddragon