Angular, Ionic & Node: Build A Real Web & Mobile Chat App

Install node.js to run angular and ionic apps, choosing a version not below v8, with examples like 10.4.0 or 10.6.0; verify installations using node -v and npm -v.

Install the Angular CLI globally, verify Node version, and use ng new and ng serve to build and run an Angular project with components, pipes, and directives.

Install mongodb community edition by downloading from mongodb.com, create a data/db directory on your chosen drive, and start the mongod server from the command prompt.

Install MongoDB and Robo 3T, start mongod, and use the mongo shell to view databases, switch databases, list collections, and inspect or delete documents.

Explore using VS Code as your code editor for building a real web and mobile chat app with Angular, Ionic, and Node, with browser-based setup tips and cross-platform installation.

Learn to scaffold an Angular app from the command line using the Angular CLI with ng new and ng serve, then integrate Materialize css and Materialize js.

Create a new Angular project from the command line using ng new, open it in your code editor, then run the project to launch the app in the browser.

Discover Angular CLI basics: ng new, ng serve, ng generate, and ng test, plus dry-run and force options to scaffold and preview components efficiently.

Explore the Angular folders by looking inside the app folder, assets, environments, and configuration files, and see how TypeScript, styles, linting, and dependencies organize a real chat app project.

Install prettier to automatically format typescript and javascript code, create a .prettierrc with 120 print width and formatting rules, and install the editor extension to enable format on save.

Explore Materialize CSS, a material design framework, to build a responsive front end with components like cards, badges, and pagination, using its JavaScript calls for interactivity.

Learn how to add Materialize CSS to a web project by including the CSS via CDN or installing the npm module, updating index.html, and previewing in the browser.

Install the Materialize CSS and JS package via npm, then configure and import it into your project to use its components inside your Angular, Ionic, or Node app's component classes.

Create sign-up and login components, add encryption to those components, and apply material classes for the form fields in this section.

Create an auth component with two child components for login and sign-up using the angular CLI, preview with dry-run, then generate real files, noting routing is not yet set up.

Create two modules: an authentication module with sign-in and sign-up components, and an auth routing module wired into app routing with a default route.

Learn to configure angular modules and routing to display the auth component via router outlets, with default routes and declared components, and navigate between views in the browser.

Initialize Materialize tabs by importing the library and setting up the tabs container with JavaScript. Structure HTML with panel and body classes, and apply blue styling to sign up tab.

Learn how to modify the authentication tabs for login and sign up by adjusting responsive grid classes, simplifying top tab components, and updating related css and titles to reflect changes.

Create and integrate login and sign up components by generating them, adding to the correct module, updating declarations and exports, and setting login as the default tab.

Build a sign-up form using a responsive 12-column grid, place username, email, and password inputs inside a styled container, and customize fields with icons, placeholders, pre-filled values, and helper messages.

Apply simple styles to the sign up page, including inputs for username, email, and password, and style the sign up button with a 20-pixel font.

Reinstall Materialize CSS to fix a loading arrow and chart visibility before login, follow the install commands and restart steps to resolve not defined errors.

Change tabs color in a real web app by modifying the active tab class and applying global CSS styles to update the background color and ensure consistent tab appearance.

Learn to add authentication to the app, including sign-in and sign-up flows, and display error messages for invalid credentials or non-existent users, while handling successful authentication.

Create a NodeJS folder for the backend and add it to a single workspace with the frontend. Manage front-end and back-end code together to streamline building the chat app.

initialize npm for the backend, install express and mongoose, create a startup file, and configure a mongoose connection to a local database on port 27017.

Install nodemon globally to auto-restart the server on changes, then start the server and verify it runs on port 3000, restarting as needed.

Create project folders for routes, controllers, and models; define the database schema and add configuration files with secret keys for the backend.

Create and manage a secrets file, export secret values for use across modules, and prepare for authentication by integrating a secret key.

Install cookie-parser and morgan as dependencies, require them in the Express app, and configure them for development to enable cookie parsing and request logging as groundwork for authentication.

Define a Mongoose user schema for authentication with username and password fields, optionally adding email and other fields, then export the user model for use in the app.

Set up authentication routes in a Node.js and Express app, creating post routes for register and login. Wire controllers, apply validations, and export the router for use in the app.

Add express body-parser middleware to parse signup and login data, test endpoints with Postman, set data size limits, validate inputs, and plan password encryption.

Use Joy to set up a schema-based validation for signup data, enforcing username minimum length five, a valid email, and a password minimum length, before posting to the database.

Install and require the HTTP status codes module, then use its predefined constants in your Angular, Ionic, and Node chat app to replace raw numbers.

Check if an email exists by querying the user model with findOne, normalize the email to lowercase for consistency, and return an email already exists message if found.

Learn how to check if a username already exists and validate input, including normalizing the name by capitalizing the first letter, and handle successful validation with a console message.

Encrypt and hash passwords before saving to the database using an asynchronous hashing method. Create and store the user data, including email and the password hash, in the database.

Use postman to create users by hashing passwords, validating unique email and username, and saving to the database. Start implementing token-based authentication with web tokens.

Learn how to implement jwt authentication in a web app by signing tokens with a secret, detailing header, payload, and signature, setting expiration, and protecting routes.

This lecture explains creating a jwt, its three parts (header, payload, signature), storing the token in a cookie on front end, and attaching it to requests with an authorization header.

Build a real web and mobile chat app by implementing an auth sign-up service in Angular, wiring HttpClient to backend endpoints, and registering users via a POST request.

Learn to build a sign up form with angular reactive forms by importing the reactive forms module, creating a form group with username, email, and password, and applying validators.

Enable cross-origin resource sharing in a node express app by installing and configuring the cors module, enabling signup and posts with proper headers.

Display inline sign-up form errors by validating inputs and showing messages under each field, such as username is required, email is required, and password is required.

Display an error div and arrows on the signup page, styled with CSS and centered, and conditionally rendered with the Angular ng directive to show backend error messages.

Display and differentiate error messages for user input in the chat app, handling both backend validation errors and frontend validation to show specific messages.

Create streams components and a dedicated streams module with routing, wire them into the app module, and enable navigation from signup to the streams page.

Add a materialize spinner on the sign-up flow, using the indeterminate progress class; show it for two to three seconds with a timeout before navigating.

Implement a login route in an Angular, Ionic, and Node chat app with front-end and back-end validations for username and password, plus token-based sign-in with cookies.

Test the login flow with Postman by sending username and password, observe token creation, and verify responses for non-existent users and incorrect passwords.

Build and validate a login form in an angular ionic node chat app, creating form groups and controls for name and password, with validation, error messages, and a progress spinner.

Learn to implement an auth login service in an Angular Ionic Node app, including a login endpoint, user feedback, and route protection for authenticated users.

Explore building the posts stream page with a post form, real-time post display, likes, and comments using sockets in Angular, Ionic & Node chat app.

Adjust the token expiration time, verify token validity, and implement a one-hour ban policy for login attempts in the Angular, Ionic, and Node chat app.

Create and integrate a token service using NGX cookie service in an Angular, Ionic app; install, import, and provide the cookie service, then set, get, and destroy tokens.

Learn to implement token handling with the NGF cookie service by setting, retrieving, and deleting cookies for tokens in an Angular app.

Set token method shows how to call the talking service, store tokens in a cookie, and retrieve and display the talking payload in the browser console during login.

Implement an auth guard to protect routes using canActivate, check for valid tokens, and redirect unauthenticated users to the login page, ensuring only authorized users access chat app routes.

Protect routes using an auth guard to control access based on authentication, navigate with the router after login or logout, and verify user status on the streams page.

Learn to protect routes with an automatic login flow, keeping users signed in and redirecting authenticated users to the streams page while sending others to the index page.

Build and integrate a toolbar component for an Angular, Ionic app using Materialize styles. Wire the toolbar into the streams module and enable navigation and logout actions.

Learn to style the chat toolbar with CSS, wrap toolbar contents, customize a numeric indicator, and apply a separate CSS file to update the toolbar component.

Display the user image and name on the streams page using responsive image tags, placeholders, and CSS classes for a functional toolbar navigation in an Angular, Ionic, and Node app.

On the streams page, build side-by-side post form and post display components within a responsive grid, enabling real-time posting, likes, and comments.

Create new components and wire them into the streams and site modules, specify placement in the strings module, and code the site component to display correctly.

Learn to add collections to site components by selecting a suitable collection, copying records, and wiring material icons via font and icon links to display on the side component.

Learn to edit site components by renaming streams, people, follow us, photos, and notifications, and customize icons and fonts to display streams, followers, photos, and library items.

Build a top side component that displays post counts and follower metrics, with active links and color changes, using ul, li, and collection item classes in angular/ionic.

Create a posts form component for the streams module letting users type messages and save them. Integrate the form with the streams component to display posts and costs.

Assemble a post form with input fields, a text area, and image/file uploads inside the post form component, paste code, and prepare data submission to the database.

Build and style a post form component for file uploads, integrate sample code, adjust margins and classes, and plan backend routes to post data in a real web app.

Define a post schema in mongoose that references the user collection, stores post content, an array of comments with user references and creation date, and tracks total likes with defaults.

Create a posts route in express, build a posts controller, export the router, and connect the front end to send data to the back end (test with Postman).

Create a posts service in an Angular Ionic Node app to send and retrieve posts, like and comment, wiring endpoints and routes, using reactive forms and a form builder.

Extract the value from the reactive form and post it via the posts service to the back end. Subscribe to the response and display all messages on the front end.

Implement jwt token verification as middleware for protected routes, handling cookies and authorization headers, decoding and validating tokens, and returning clear errors for expired or missing tokens.

Explore how a verified token is checked via cookies to authorize routes like post creation, test token validity and expiration, and observe how requests expose the user data.

Create an http interceptor to attach the authorization token to outgoing requests and intercept responses, implementing a class that clones requests and adds the authorization header when available.

Implement an http interceptor to automatically attach authorization tokens to request headers, intercept and manipulate requests and responses, and test end-to-end flow in a real web and mobile chat app.

Extract the authorization token from cookies or the header, split the value to retrieve the token at index 1, and guard routes that require talking access in the chat app.

Send a post from the frontend to the backend, validate the request against the schema, and store it in the posts collection with user details.

Add post to the user model by storing posts as an array of objects in each user document and reference created posts with a default date and time.

Update user post array shows how to update a user's posts when a new post is created by pushing it into the posts array via async/await.

Decode the token payload by splitting the token on dots, base64 decoding the payload, and extracting user data like email, username, and expiration for display and validation.

Extract the user's name from the token and display it in the toolbar, replacing static text with a dynamic username.

Learn to display posts using the post component from the post collection, including avatar, name, date, country, and optional image within a card layout.

Explore adding the post component html to enable likes and comments, including icon handling and navigation to a comment page.

Style the post component by aligning the post image to the right and resizing images. Show user name, dates, country image, and like and comment counts with a comment box.

Define the post routes and implement a get all posts endpoint, populate the user field, and fetch and display posts in descending order in the Angular app.

Retrieve and display all posts in the post components, looping through posts to show the username, post content, creation date, total likes, and comments, with notes on real-time updates requiring refresh.

Install the moment module and format post timestamps in your Angular, ionic, and node chat app by importing moment and displaying relative times like 'minutes ago' using time from now.

Install socket.io on the server and wire client and server to emit and listen for events, enabling real-time posts, messages, and chats without full page refresh.

Listen for connection events and manage socket streams in a real web and mobile chat app. Export functions, require sockets, and wire the client to handle initial connections.

Install the socket.io client, import it, and configure a socket host and socket instance to emit and listen for events. Test in browser and fix global is not defined error.

Learn to emit a socket.io event named refresh to trigger post list updates across all connected clients, and listen for that event in the posts component to refresh posts.

Learn to test socket.io real-time events by emitting new post updates to rooms and listening on the client to update the feed instantly without page refresh.

Implement a like post feature by handling user clicks to increment likes and sending post data to the backend, updating the post array and total likes via routes.

Implement a like feature by adding a dedicated route and controller for liking posts, incrementing the post's like count by one and returning a confirmation message.

Implement the like post service to increment the post's like count and emit refresh events. Test in console and database, and plan to increment only once in the next video.

Implement a like feature that allows a user to like a post only once by checking the username against a likes array and incrementing the total if not present.

Check if a post is liked by the current user and toggle the like state by checking the username in the post's likes, updating the like icon color.

Adjust the post component column to fit a responsive grid across small, medium, and large devices, using the collection layout to ensure consistent, balanced widths.

Develop a comments component with a comments box to let users add comments to a post, integrated with posts and routes in an angular, ionic, node app.

Hide nav content in the comments component by selecting the toolbar content with document.querySelector and setting its display to none until initialization completes.

Shows how to build the comments component html in an Angular, Ionic & Node chat app. Demonstrates using subcomponents, copying and removing parts, and enabling users to add comments.

Implement the comments service method by mirroring the like functionality, retrieving the post ID from the activated route snapshot, and sending comments to the backend via the post service.

Implement saving comments to a database by pushing user id and username into a post's comments array, validating non-empty input, and displaying errors and updated comments.

Bind the comments form, validate input, and disable the send button when the field is invalid or empty, then reset the form to prevent empty submissions.

Learn how to create a route to fetch a single post by id, use find by id and populate with user and comments, and handle not found errors.

Display comments for posts using services and observables, render post data with comments, images, usernames, and times in a structured ul collection.

Display real-time comments by listening to socket events and refreshing the feed as posts arrive, showing the latest comments first and formatting created times for readability.

Display posts and their comments in a chat app, manage posts and comments within a collection, and enable liking posts while navigating streams and toolbars.

Check if a user has commented on a post by reusing the like-check class on the post page, then update the UI to reflect comment status across the stream page.

Style the side components by adding stars, changing icon colors, and highlighting the active link via a router link active class, with fonts and weights adjusted for readability.

Implement auto logout by detecting an invalid token, removing sensitive data, and routing the user back to the index page after a short timeout.

Explore building real-time streams features by displaying top streams based on likes, enabling follow actions, and in-app notifications with live updates and controls.

Create and integrate a people component in an Angular, Ionic, and Node chat app by setting up routing, displaying registered users, and adding navigation links for follow and chat.

Explore the people component HTML to display user cards with images, responsive grid classes (col-12, md-6, lg-4), clickable links, and navigation to private chats and public chat pages.

Copy and paste the new style code into the people component, save, and preview the appearance with the avatar, username, country, and icons, then adjust button colors with a class.

Create a get all users route and its controller for the Angular, Ionic & Node chat app. Wire the router and middleware to fetch all users.

create a new service to fetch all users via the /users route, populate their posts, and handle responses to display synchronized user data in the chat app.

Create a users service to fetch all users from the backend, inject it in the module providers, and expose the data as an observable for display in components.

Fetch and display all users from the database in the people component using a for loop, omit the logged-in user, and navigate to a chat page by selecting a user.

Remove the logged-in user from the people list using the remove method and the login service to match usernames, then update the UI to prevent self-interaction.

Implement follow user functionality by adding a followers/following relationship, update user models with an ObjectId-based following field, and create a friends route to handle follow actions via post requests.

Implement the follow user method by validating the follower and the followed, checking whether a follow entry already exists, and pushing a follow request into the following collection.

Implement a follow user button by wiring the UI to a backend API, sending the user ID, and updating the UI to reflect the follow status.

Learn to fetch a single user in a web and mobile chat app by id or username, via routes for get by id or by name, with related fields populated.

Learn to implement a single user service method to fetch data by id or by name, connect it to the user component, and validate results in the browser console.

Learn how to determine if the logged-in user follows another user by searching a collection with find, handling true/false results, and updating the follow button state accordingly.

Click the follow button to toggle its state, update the button, and use sockets to emit and listen for refresh events on localhost, reloading the page to reflect changes.

Create a new following component in the Angular app, wire it into the router with a following route, reuse site components to display followed users with avatars, and test.

Display followed users in the chat app, fetch and show their names and images, and update the list in real-time using socket events when a user is followed or unfollowed.

Learn to implement an unfollow user service method in a real web and mobile chat app, removing the user ID from the following list and exposing backend routes.

Explore the unfollow user route in an Angular, Ionic and Node chat app, mirroring the follow flow to remove a user from the list and trigger a socket-driven UI refresh.

Build and integrate a followers component within an Angular, Ionic & Node real web and mobile chat app, configure modules and routing, and implement follow/unfollow interactions backed by database data.

refresh the followers component to automatically update the following list after follow/unfollow actions, ensuring real-time display of updates. demonstrate the changes through user interface tests with updated follow status.

Create and integrate a notifications component that shows alerts when a user follows you or views your profile, and supports marking as read or deleting notifications within a routed interface.

Add a notifications field to reference the art collection via an ObjectID, with message as a string, a read flag defaulting to false, and a created date to track timing.

Update and send push notifications when a user follows someone, configure default values, and display notifications in the app's component to enhance real-time engagement.

Explore building a notifications component in HTML, styling list items with avatars, messages, and timestamps, including read/unread states and material icons.

Explore implementing notifications with sockets, manage payloads and user lookups by name, and surface notification dots in a real web and mobile chat app built with Angular, Ionic, and Node.

Fix a get user route error by differentiating user id and username paths, updating the backend to a distinct username route, and verifying data retrieval for notifications.

Display notifications by rendering each message with its creation date in the notifications component and toolbar, and enable deletion while testing follow events via the database.

Learn to modify the notification time, manage post-related notifications, and display them on the toolbar, ensuring timely updates and smooth reloads.

Select and implement a notification button using icons, mark notifications as read, delete individual notifications, and pass data for mobile interactions using notification IDs.

Learn how to implement a single mark notification route for marking and deleting notifications, manage route parameters and optional vs required values, and integrate it with services and front-end components.

Learn to manage notifications by checking the request body for a delete value to either mark the notification as read or delete it, using id from parameter or body.

Use the ngClass directive to conditionally display the notification icon based on the mocked read status, apply or remove the disabled class, and reflect read or unread states.

Delete notification uses a boolean flag and the notification id to locate and remove the document from the notifications, then updates the UI to reflect the deletion.

Learn to implement a notifications dropdown in the toolbar using materialize css, including initializing the dropdown, setting triggers, adding icons and badges, and displaying the number of notifications.

Display notifications in a dropdown by loading user data and notification data, show the notification messages with user images, and reflect the current notifications in the dropdown.

Learn how the dropdown uses the ng class directive to toggle read and red unread states for messages, mark items as read, and display the number of unread messages.

Display time from now in the notifications dropdown using moments, with examples like '15 minutes ago'. Apply the same time format in the toolbar and post component.

Implement a mark all notifications button that marks all as read and sends a post request to update the database, then updates the UI with classes and colors.

Learn to mark all notifications as read by updating multiple documents with a set operator, toggling read fields from false to true, and displaying the total count of read notifications.

Display unread notification counts by filtering the notifications array for items where the read property is false, then show the resulting count in the toolbar badge.

Implement a token expiration check in the shared toolbar to automatically redirect users to the index page when the token expires, ensuring consistent behavior across all pages.

Build a streams component with two tabs to show top posts by likes, above a threshold of ten, and regular posts, using an active tab and tabs initialization.

Create and wire a top streams component in the streams module, implement tab switching to display top streams versus regular streams using click handlers and boolean flags.

Learn to display top streams by filtering posts with a minimum total likes, increment likes on interaction, and reuse post components to render top posts.

Display user data in the side components, showing posts, following, and followers; fetch data via a user data object and service, and render conditionally based on available posts.

Learn to implement routing with router links, create posts components to display a user’s posts, and manage active link states and notifications.

Explore building a real-time chat interface by navigating the chat and streams sections, displaying messages with sender and receiver, attaching images, managing read status, clearing spam, and showing online presence.

Create two components—a parent charts component and a child message component—and wire them into the streams module and routing, configuring a charts/:username route.

Hide nav content on chat component by toggling the display of top elements after the view initializes, updating the chat and toolbar components to hide user info.

Add html to the chat component by enhancing the container and message components with top positioning, a material grid setup, and a 700-pixel max height to improve layout.

Build the message header with a card layout, avatar image, user name, and online status, while handling responsive line wrapping and background styling.

Build a real web and mobile chat app using angular, ionic, and node. Learn to display message content, structure chat UI, and implement a send-message flow with a database backend.

Add the bottom bar and input field to the chat page to enable image sharing and message typing with material styles and emoji icons.

Create and wire the message routes and a send message endpoint in the backend, handling sender and receiver IDs to enable chat functionality in the real web and mobile app.

Define and implement a conversation schema and a message schema for a real-time chat app, including references to a conversation collection, participant IDs, message arrays, timestamps, and read status.

add a chat list array to the user schema that stores recipient user id and message id, referencing the user and message collections to track conversations by sender and receiver.

Create a new message service to enable chat functionality, posting messages and handling sender and receiver IDs, using template-driven forms to send data to the backend.

Learn how to retrieve route parameters, such as a username, using activated routes in Angular. Subscribe to the parent route's param map and read the parameter value.

Bind the chat input to a message property using a template-driven form, capture sender and receiver ids, and call send message method with id, receiver id, sender name, and message.

Prevent empty messages by wrapping input checks in conditional statements to block sending when the message is empty, then test by clicking send to verify no message is sent.

Implement the conversation find method by matching sender and receiver IDs using message and conversation schemas, then handle existing conversations or create a new one.

Create a new conversation by adding sender and receiver IDs and pushing participants. Save the conversation, then create and attach the first message to it.

Continue building the chat feature by composing a send and receive workflow, constructing the message body and conversation id, saving the conversation, then sending new messages or handling subsequent messages.

Update the chat list array by pushing sender and receiver message IDs, using the push operator and the each operator to place IDs at position 0.

Fix a new message error by removing extra brackets and saving the message correctly in the chat app. Learn practical debugging steps for message creation in Angular, Ionic, and Node.

Test the new message and conversation function by sending messages between a sender and receiver, and verify message and conversation documents are created.

Update message documents by locating them with the conversation ID, pushing new messages into the message array, and ensuring the send succeeds before displaying the updated chat.

Develop the get all messages route by querying conversation and participant ids, retrieving message documents from the messages collection, selecting required fields, and using try-catch error handling.

Implement the get all messages method to fetch chat messages between a sender and receiver using their IDs, and test the service in the console.

Display chat messages by showing the receiver's name and aligning messages from sender and receiver. Apply conditional logic to render left or right messages based on the logged-in user.

Learn to implement a refresh chat component in a real web and mobile chat app using sockets and events. Cover sending messages, refreshing the chat, and auto-scrolling to the bottom.

Install and import the ngx auto scroll module, apply the auto-scroll directive to the chat templates, and configure offsets so new messages automatically scroll to the bottom.

Add typing functionality and socket-based events to a chat app by joining rooms and listening for chat events in an Angular, Ionic, and Node setup.

Learn to implement real-time typing by emitting a start typing event, listening for typing events, and sending updates only to the receiver in a chat room.

Demonstrate implementing a typing indicator by toggling a typing flag (default false), showing 'receiver is typing' for active users, and stopping it when typing ends across clients.

Implement stop typing detection by using a setTimeout to emit a stop typing event after a short delay, and show has stopped typing on the receiver.

Build a messages notification dropdown for an Angular Ionic Node app by initializing two toolbars, customizing dropdowns, aligning left and right, and displaying message entries with icons and read status.

Populate a chat dropdown by retrieving the last message for each conversation using message and receiver IDs, then display the sender and created date in the dropdown.

Explore how the moment calendar method formats message dates in an Angular Ionic Node chat app, displaying today, yesterday, last week, and other date formats.

Adjust the alignment of a chat message dropdown in an Angular, Ionic, and Node app by toggling left and right alignment and spacing between icons with CSS classes.

Show unread message counts in the dropdown by using the last message per user, verifying its read flag, and notify when not on the chat page.

Implement a check if message is read to track unread messages, display the last unread message, and update read status only when both users are on the same chat page.

Provide a message dropdown link that navigates to the corresponding chat page for a selected message and marks it as read when opened.

Update the chat list method to move new messages to the top of the dropdown by deleting the entry and reinserting it at index 0 using the update operator.

Test and update the chat list method by refreshing all pages, changing a file, sending messages, and verifying new messages appear in the dropdown and chat list.

Remove unnecessary comments and tidy the server file for the real-time chat app. Move required statements to the top and correctly place routes and NDB config for cleaner, functioning code.

Install and integrate the ng2 emoji picker in your Angular project, import the module into your streams module, and address backward compatibility by installing rxjs-compat for Angular 6+.

Learn to add emoji content to a real web and mobile chat app by displaying selected emojis in messages and wiring updates to energy-related components.

Select and display emoji icons in chat, automatically sending them as message content and saving icons in the database for reuse, with updates to the content view.

Display the unread icon only for messages not sent by the current user and unread, then mark as read when the user taps the message.

Replace the router link with a click method to navigate to the chat page, pass the username, and mark the message as read through a service that updates the database.

Configure message routes with get and post methods to map, retrieve, and pass values to the database using the gate method, while reading sender and receiver from the request body.

Demonstrate the message aggregate method per user, using match and unwind operators to fetch messages by sender and receiver, then mark them as read with set.

Learn the message aggregate method (part 2) for a real web and mobile chat app, implementing per-user message updates, read status toggling, and test flows with refresh events.

Implement mark all messages as read by updating every message for the current user via a dedicated route and controller.

Fix the message count bug by resetting the counter to zero when messages are marked as read, ensuring the display hides the count.

Add a user class to track online status with socket events, update the front end, and remove users on disconnect.

Add user class part two removes a user by socket id, updates the global user array, and retrieves the remaining connected user names for the room.

Emit online events by sending the room name and user name through sockets. Listen for these events, join the room, and build a unique online user list.

Learn to handle disconnect events in a real-time chat app by removing the disconnected user from the user list, updating the room state, and broadcasting online user changes.

Enable data flow across chat components with the Angular output decorator by emitting events from parent components to charts, then to the message component, reflecting online status.

Learn how to pass data from a parent chat component to a child with input properties, emit events with outputs, and listen for changes to reflect online user updates.

Explore how to use the ng changes method to detect and display changes in a component, leveraging the on changes lifecycle and the SimpleChanges parameter.

Import a utility and use its indexOf method to check the receiver name in the array, then display the online message when found and hide it otherwise.

Adjust margins to position online indicators and status text in a real web and mobile chat app, using class-based styling, font size tweaks, and conditional layout.

Add an online status icon to the people component by implementing an isOnline check and rendering the icon when a user is online.

Learn to style the scrollbar using CSS by copying code, applying global styles, and adjusting colors; see how the changes render across Chrome, Opera, and Firefox.

Learn to implement image upload from frontend to cloud storage, display and set default images, attach images to posts, handle password changes, and notify users when profiles are viewed.

Develop and integrate image components to add and display photos in the Angular, Ionic & Node chat app, with image routes and streams module updates.

Build the images component HTML by adding required divs and a file input to upload and display selected images, with icon support and a profile image option.

Change the upload button and align it on the same line with the file input, adjust column widths, and implement image display and the ability to upload images.

Learn to implement image uploads in an Angular Ionic app by installing a file upload module, importing it, using a directive with file selects, and handling onFileSelected for the backend.

Implement a read image file method that returns a promise using a file reader to read the file as a data URL, with onload and onerror handling for backend delivery.

Learn to handle image file input by reading the selected file with readAsDataURL, display it, and upload to the backend and cloud storage while enforcing a file size limit.

Implement an image upload route in an Angular, Ionic & Node chat app, connecting front-end image input to a back-end image route with controller logic and data handling.

Learn to use Cloudinary for image and video uploads, sign up for a free account, access the dashboard, get API key and secret, and integrate with Angular, Ionic, and Node.

Learn how to implement Cloudinary image uploads in an Angular, Ionic and Node chat app, including configuration with cloud name, API key and secrets, upload methods, and handling callbacks.

Demonstrates uploading an image to Cloudinary, validating the response, and retrieving and displaying the uploaded image using its object data (public key, signature, format, size) in a web/mobile chat app.

Upload a default profile image from the dashboard, capture its image ID and version, and apply it as the default for all users so new sign-ups display it by default.

Display user images by fetching and subscribing to the user's image data, and render them in the image components. Support uploading new images via sockets and allow setting default image.

Click the set default image button to replace the profile image by passing the image id and image version to the backend service, updating the display across the app.

Change the default image by selecting an image, updating the image id and image version via routes, and confirming the default updates.

Display user profile images across the app by assigning default images when missing and updating image sources in the people, following, complaints, and notifications components.

Display user images in chat by pulling profile pictures from sender and receiver data into the message drop-down, replacing placeholders with dynamic image sources.

Resolve chat image display issues by conditionally rendering user images only after data loads, adjust image dimensions, and apply consistent image sources across chat, streams, and top streams components.

Create a view user component that navigates to a profile page displaying a user's posts, followers, and following, using routing to pass the username and render the user data.

Display user information across tabbed views by configuring top elements, avatars, and conditional content in the view components to show and hide content as users navigate.

Add tabs in the Angular Ionic Node chat app by wiring HTML and TypeScript, initializing tabs, and using conditional rendering to display posts, following, and user details.

Hide and show tabs content in a user profile by toggling posts and following sections with tab parameters and conditional rendering.

Retrieve a user's data by name using activated routes, subscribe to route parameters, and fetch and display the user's posts in an angular, ionic & node chat app.

Display tab posts teaches how to render a user’s posts within the app by wiring streams components to show the user name, country, post content, likes, comments, images, and timestamps.

Display tab followers renders a list of followed users from the following array, showing each user’s name and profile image or placeholder, with links to view posts and profiles.

Display the user's profile image on posts by creating a user variable that holds the complete user object, then bind the image to each post.

Explore how the logged in user posts tabs navigate to the user view via router links, displaying the login user’s information, posts, and following data from the user data set.

Implement a profile view notification flow in the Angular, Ionic, and Node chat app by sending the viewed user id to the backend to trigger profile notifications.

We implement a profile view route with backend post requests, pushing daily notifications when a profile is viewed, using moments for date handling and a one-notification-per-day rule.

Implement the profile view route with notification logic: trigger profile view notifications using sender IDs, validate non-empty dates, avoid duplicates, and test by refreshing and viewing profiles.

Fix the view user link so the image alone navigates to the view user page; remove the div click handler and move it to the image's top-right area.

Creates a change password component and wires it into the routing module with an icons/password path, enabling users to access and update their password via the link.

Explore the html change password component, including a form for current and new password, paste-ready css classes, and client-side validation that updates the page and changes the password when valid.

This lecture builds a change password form with a reactive form and form group, including current, new, and confirm password fields with required validation, matching checks, and error messages.

Create a custom validator in the password form group to compare new password and confirm password, binding fields and showing a password does not match message when they differ.

Enable a change password route with validation and user messages, wire a service to send current, new, and confirmed passwords to the backend, where passwords are encrypted before saving.

Learn to implement a change password controller that encrypts and hashes passwords with salt, validates the password field, compares inputs to stored hashes, and saves the secured password.

Change the password by updating the user document with a new encrypted value, then verify by logging in with the new password and ensuring the old one fails.

Implement image uploads with posts by integrating the file upload directive, binding the input, handling file selection, and submitting posts with or without an attached image to the backend.

Learn to send a post with an optional image by validating the body, uploading the image to Cloudinary, and attaching the image id and version to the post.

Test sending images with messages by attaching a random image to a post, verify cloud storage upload and image id, and compare posts with and without images.

Display post images in the Angular Ionic Node chat app by conditionally rendering image tags when an image exists, updating sources, and showing the latest posts first.

remove old posts by filtering to posts under 24 hours old for both all streams and top streams, and display images when available.

Get the user location using an IP geolocation API, extract city and country names, update the user documents in the back end, and display these details in posts and profiles.

Start building a mobile app on Android and Windows, implement authentication with sign up and log in, display messages, and enable likes and comments with native API.

Install Ionic and Cordova globally, set up Node and npm, and create a new project folder to add the Ionic project into the workspace.

Create an Ionic project using the blank template, then learn to add tabs and structure front-end and back-end in a shared workspace. Run commands, preview in browser, and target Android.

Create the home page for a real web and mobile chat app by applying lazy loading and proper module configuration in an Angular/Ionic project.

Create login and register pages, set the login page as the default startup screen, and enable navigation to the home page after login using lazy loading.

Learn how to use the nav controller push method to navigate from the login page to the register page, pushing pages onto the navigation stack and returning with back button.

Learn to set up a shared variables.scss, define default and platform-specific values (Android, Windows), and update across all pages by downloading and integrating the provided variables file.

Build the login page for an Angular, Ionic & Node chat app by implementing a username and password form, integrating Ionic UI components, and applying styling and layout in HTML.

Design a login page by applying css classes, adding left-aligned icons, and implementing a gradient background, while integrating a logo and preparing the same styles for the signup page.

Copy the login page setup to the register page, adding link, username, email, and password fields with styles, and adjust navigation with a back button and header borders.

Replace the placeholder text with actual content and customize visuals by adding a logo, adjusting font size, color, margins, and applying transforms to the chat app UI.

Use template-driven ngModel on the register page to bind email and password. Import the forms module and create a sign-up method that logs credentials before sending data to the backend.

Create a new auth provider with generics in an Angular Ionic app to register a user by sending email and password to the backend endpoint via an observable.

Learn to implement a user registration flow in an Angular Ionic Node app, validate inputs, display errors, and manage the returned token with local storage or cookies.

Display error messages in a sign-up form by importing the alert controller, calling present with validation messages like username required and email exists, and styling alerts with a css class.

Explore Ionic storage in a real web and mobile chat app by installing the storage module, creating a storage provider, and using set and get operations with remove.

Decode the token payload by splitting the token, base64 decoding, and parsing the json data; retrieve it with storage get methods and test via sign up and console output.

Implement a loader in an Angular, Ionic & Node chat app by importing the controller, creating a loading indicator, showing it during registration, and dismissing on success or error.

Create a new tabs page named tops and set it as the root after a brief loading delay, comparing push navigation with setRoot for back button behavior.

Check the stored token to enable automatic login and navigate to the main page if valid, otherwise route to the login page for a seamless startup.

Demonstrates the login flow by using the existing sign up validations, validating username and password, and handling errors such as username not found or password incorrect during login.

Create an Angular http interceptor to attach the authorization token from storage to every request header, register the interceptor, and implement the intercept method.

Ionic token http interceptor part 2 retrieves a token from storage, uses switchMap and pipe to attach a bearer authorization header, and tests by calling an endpoint after clearing storage.

In Angular, Ionic & Node, add all provider methods by reusing existing message, post, and user services, update the app module, and inject providers for a real chat app.

Create a streams page to display posts and wire it to tabs, then customize the top bar for navigation in the Angular, Ionic & Node chat app.

Explore implementing streams with segments on the streams page, switching between streams and top streams, setting the default segment, and integrating segment-related css and code snippets.

Add segment contents to the streams page by copying code, binding a switch to show posts or top streams, and displaying user image, time, city, country, and post image.

Fetches all posts from posts provider, subscribes to the observable, and displays them on stream page using a template loop showing user, time, city, country, image, likes, and comments.

Display post images on the streams page by using image IDs and user images, show placeholders when images are unavailable, and render posts with or without images.

Learn how to implement a like post feature by sending the post id and related objects to the backend, updating the like count, and preparing for subsequent interactions like comments.

Create a comments page and navigate with push, passing the post object as a parameter, retrieve it on the comments page, display comments, and submit new ones to the backend.

Hide the top bar on the comments page by using querySelector to select the page top element and setting its display to none, then restore it when leaving the page.

Build a comments page in Angular, Ionic, and Node by hiding tabs, adding input fields, and displaying comments with avatars, user names, and timestamps.

Display post comments by retrieving a single post with its id, subscribing to the post provider, showing each comment with the user name and avatar, and handling no comments yet.

Add comments to posts by wiring a comments method with post id, implement two-way binding for input, and display recent comments first via the provider, updating the view after submission.

Install the socket.io client and wire up events to enable real-time updates for comments, posts, and likes by listening to refresh page events and emitting new data through sockets.

Check if the current user has liked a post or comment using a user object and a check method, and use the energy class directive to reflect the status.

Add a floating action button (fab) that opens a new post page as a modal from the streams page, passing properties and placing the button fixed at the bottom right.

Demonstrates adding a back button to the post modal, placing an ion back icon on the left, and wiring it to pop the navigation stack back to the streams page.

Create a post input with an image box and two buttons for image selection and posting to backend, and structure the user interface with columns to support a post feature.

Learn to implement post creation in a real web and mobile chat app using Angular, Ionic, and Node, including image support, validation, and social interactions.

Explore how to add image capture in an Ionic app by installing the native camera plugin, configuring camera options, and handling destination types, encoding types, and media choices.

Explore configuring camera options for selecting and uploading images, including quality, destination type, encoding, orientation, and edit settings, using the photo library and testing with a browser plugin.

Install and test the Cordova browser plugin, use the get picture method to populate the image variable, and send the image with posts to the backend.

Learn to upload a post image by handling empty fields and image presence, then send posts with or without images to the backend and test on a cell phone browser.

Learn to display top posts by filtering streams with a likes threshold, reuse existing post logic, and enable liking and commenting within the streams feature.

Learn how to detect expired tokens in an Angular/Ionic app, delete the token from storage, and redirect users to the login page to maintain secure sessions.

Hide the top tab bar on the login page by detecting the top elements with querySelectorAll and setting their display to none, also applying to the register page.