Angular 13 Masterclass 2022 - Create 4 Real World Projects

Learn TypeScript fundamentals essential for Angular and install TypeScript, Node, npm, and Visual Studio Code for development.

Create your first TypeScript program by setting up VS Code, organizing a TypeScript project folder, and transpiling to JavaScript with tsc, using watch mode for automatic updates.

Explore TypeScript’s basic data types, string, number, boolean, and how strict typing catches type errors at compile time, using explicit type annotations and inference with or without initialization.

Explore advanced TypeScript types, including arrays, objects, and tuples, with explicit type annotations, mixed arrays, fixed structures, optional end elements, and the any type, to enforce type safety.

Explore how to declare and type functions in TypeScript, specify parameter and return types, handle strings and numbers, and leverage type inference to ensure correct output.

Explore how to define TypeScript functions with type checking, including optional parameters and default parameters. Master rest parameters and arrow functions to create flexible, concise implementations.

Explore interfaces in TypeScript as blueprints that define the structure and types for objects, classes, and functions, and learn the syntax to implement them.

Explore TypeScript interfaces and inheritance, making properties optional or read-only, enforcing type safety with functions and objects, and extending multiple interfaces for real-world patterns.

The lecture explains union and intersection types in TypeScript, showing how unions combine types with | and intersections require all properties, using dog interfaces as examples.

Create and use TypeScript classes as blueprints for objects, with constructors, properties, and methods. Master this keyword, access modifiers, and new object creation to write concise, typed code.

Master inheritance in TypeScript classes and using interfaces as blueprints across multiple classes. Learn to define an Animal interface and implement it in classes, using super for constructors.

This lesson explains how to use access modifiers (private, public, protected) and read-only flags, demonstrates static properties, and teaches getters and setters to safely access private fields.

Install Angular using npm, set up a proper project with the angular command line interface, run a local development server, and prepare production builds for deployment.

Explore the Angular project structure, including node_modules, source, modules and components, and learn how to change data and styles to affect the output in a live Angular app.

Gain an overview of Angular components, decorators, selectors, templates, and how modules, bootstrap, and metadata come together to build interactive views.

Create a new angular component in the app, declare and bootstrap it. Use inline templates and styles with backticks, and apply selector and property binding with square brackets.

Learn how interpolation and data binding in Angular 13 enable dynamic templates, using public properties, string methods, and simple expressions to render and manipulate content.

Explore data binding in Angular by working with numbers, objects, arrays, and functions. Learn rest parameters, printing numbers, and string interpolation with interfaces and type checking.

Learn to create modules and components in Angular, export and access them, and import modules into the app to render their contents via selectors.

Explore how events drive interactivity in Angular by wiring click events to component methods, pass arguments, use template variables and mustache syntax to update values and display alerts.

Learn to handle Angular events like key up and key down, read input values from the event target, and log real-time output to the console.

Explore property binding in Angular to bind element properties - such as disabled, value, src, or href - to dynamic data, overcoming interpolation limits and enabling booleans and real-time updates.

Explore Angular class binding and property binding to conditionally apply multiple classes (red, italic, bold, green, background) using [class] and directives, with true or false booleans for dynamic styling.

Explore style binding in Angular to apply dynamic inline styles like color, background color, and font size. Use a style object with ngStyle to toggle font weight and font style.

Learn how two-way data binding links the view and the model with the ngModel directive in Angular, using property and event binding alongside the forms module.

Learn structural directives in Angular, using ngIf and ngFor to conditionally render or repeat elements with star syntax and ng-template.

Learn to use the switch directive to render different content based on a level value, with ngSwitchCase for beginner, intermediate, and expert, using property binding and an optional dropdown.

Master the for directive (ngFor) to render list items in Angular. Iterate arrays and objects, access index, and use first, last, even, and odd conditions for real-world lists.

Explore how to create custom directives in Angular 13, manipulating the DOM with structural and attribute directives, using ElementRef to apply styles like background color, borders, and layout.

Explore how angular services provide reusable data and functions injected into components to share information. Review a hardcoded student details service with a getStudentDetails method, injectable and provided in root.

Inject services through constructors to wire dependencies and reduce changes across components. Use providers and app module configuration to manage services, and track calls with a keep track service.

Learn how Angular pipes transform displayed data without changing the underlying component data. Discover predefined pipes like string pipe, lowercase, uppercase, title, slice, percent, currency, and decimal pipes.

Create a custom summary pipe in Angular that transforms text by slicing to 300 characters and adding ellipses, and apply it in a template to display a concise summary.

Set up your first Angular calculator project from scratch, compare Angular features to plain JavaScript, explore templates, reactivity, and two-way data binding to reduce code and accelerate development.

Build angular app’s html skeleton and template with directives to minimize code, create a calculator layout with a disabled output input, and populate buttons from string expressions evaluated with eval.

Learn to style a basic app using simple CSS, including default stylings, layout with a calculator container, input fields, disabled states, and responsive button hover effects.

Bind the input value, update it by using the get input method on button clicks, and concatenate each pressed value with the current entry, using prevent default to stop refresh.

Learn to implement a calculator in Angular by handling the equal action, evaluating expressions with a string, validating inputs, displaying error messages for invalid expressions, and wiring the clear button.

Learn how to clear input and output for the next calculation, handle errors by restarting, and delete the last character with slice in an Angular calculator.

Explore Angular component lifecycles from creation to destruction, including onChanges, onInit, doCheck, afterContentInit, afterViewInit, and onDestroy, with practical initialization and cleanup examples.

Explore how Angular lifecycle hooks run in real time, from constructor and init to changes, do check, and after content init and check.

Learn how to split two-way data binding in Angular by separating property binding and event handling to respond to input changes while keeping the model in sync.

Learn how to pass data from a parent to a child in Angular 13, using the input decorator and two-way data binding to sync updates.

Pass data from a child component to its parent using the output decorator and event emitter, emitting on input changes and handling events with parent event binding.

Explore how Angular handles forms, from building blocks like inputs and selects to template driven and reactive forms, with real-time data processing and validation.

Explore template-driven forms in Angular, where validation and data binding occur mainly in the template; learn the form and model directives and why this approach struggles with complex forms.

Explore template-driven forms in Angular by building a simple form, binding inputs with a template reference variable, and printing live values in the view.

Learn how to submit an Angular template form by wiring a submit event to a handler, passing the form data as an object, and displaying student details after submission.

Group fields in template forms with the group and model group directives to nest inputs into objects, such as marks with scores, and compare two-way data binding with property binding.

Define a type-safe class model with name, age, and total properties, instantiate it to bind form data in Angular, and enable server data transfer with validation.

Explore template driven form validation in Angular, using automatic directives and classes like ng-touched, ng-dirty, and ng-valid. Learn to apply and access these with template reference variables and ngModel.

Apply directive-driven visual feedback in Angular forms by binding valid and invalid classes and displaying contextual error messages, including required and minimum and maximum value checks for inputs.

Explore a template-driven form example that builds a real-world user form with email and password validation, name pattern checks, and a disabled submit button until all fields pass.

Continue building a create user form with template-driven validation, adding visual error messages for email, name, and password, and applying classes dynamically based on validity.

Explore reactive forms in Angular, contrasting them with template forms, and learn how the component handles values, complex custom validations, and unit testing for large, scalable forms.

Import the reactive forms module, bind a form group, and define form controls like email, name, and password to create a simple Angular reactive form.

Learn how to build and manage reactive forms in Angular by creating form groups and form controls, importing directives, and accessing values in JSON format in real time.

Learn how to submit reactive forms by consolidating values from a form group, logging submissions, showing a success message, and resetting the form with setValue.

Nest forms in Angular using reactive form groups and form controls, building nested groups like students and marks, and access values with setValue and value objects.

Master reactive form validation in Angular by configuring validators, using get methods to access form controls, and displaying error messages and styles for invalid inputs.

Develop a simple to-do list app in Angular 13, covering add, display, delete items, and basic edit options, all demonstrated in a concise project overview.

Set up an Angular project without routing, clean the app, and craft a basic to-do list UI with an input and a list area, plus global styles.

Set up the app logic by creating an empty, mutable array and adding items on enter with an add item method. Delete items with splice by index.

Learn to style an Angular app by designing toolbars, inputs, and paragraphs with precise colors, spacing, and alignment, including focus outlines, shadows, and responsive margins.

Edit to-do list items by binding an input to the item, triggering an edit on enter, and updating the underlying array.

Explore the core REST HTTP calls—get, post, put, patch, and delete—and learn how a frontend Angular app communicates with backend APIs and databases to fetch, create, update, or remove data.

Create dummy data by building a mock json file students.json with four student records, organizing it in a data folder to simulate server data for a frontend app.

Learn to fetch data in Angular by building a data service, using an HTTP client GET, subscribing to results, and displaying student data with error handling.

Learn how to use a mock API to simulate backend calls from the frontend, using endpoints like /api/users to fetch data and test get, post, put, patch, and delete.

Create a new resource using a post request, sending a JSON body with user data to an API, and interpret 200 success or error responses in a mock data environment.

Explore updating resources with put and patch, learning when to send the full JSON object versus partial data, and how IDs drive updates in real-world angular projects.

Learn to delete a resource in angular by sending a delete request with the resource id, handling an empty response, and updating the UI with a 'deleted successfully' message.

Learn to set up a fake json server as a mock backend, create a dummy database, and perform create, read, update, delete operations on resources like students.

Explore why routing matters in single page applications and how routes enable real-time updates and reactivity within Angular, React, and Vue.

Discover how to add routing to an Angular project by configuring the app routing module, defining routes with paths and components, and using router outlet and router link for navigation.

Explore implementing a page not found (404) with wildcard routing in Angular 13, configuring the app routing module, and placing the wildcard route last to redirect unmatched routes.

Apply conditional styling to active links using router link active, configure default routes, and manage not found behavior to guide users through Angular 13 projects.

Learn how to implement redirect routes in an angular 13 app by redirecting the base path to a predefined route such as /about using redirectTo and pathMatch: 'full'.

Learn how to pass and read route parameters in Angular 13 by navigating with the Router, receiving parameters via ActivatedRoute, and displaying dynamic block content.

Learn to implement a custom back button in Angular that uses router navigation with optional parameters, reads them via ActivatedRoute, and highlights the previous blog post when returning.

Learn how dynamic routes simplify navigation by updating a single place to propagate changes across the app, using relative routing to compose paths without hard-coded values.