Build Real World Development Projects Using Angular

Install Node.js and verify versions, install Angular CLI, create an Angular project with routing and CSS, open in code editor, and run ng serve to view on localhost with reload.

Create a top bar component in an Angular app by generating it, wiring it into the root app, and styling with container and branding classes before exploring angular material integration.

Add Angular Material to your application by running ng add @angular/material, choose Indigo Pink, and enable global typography to set up components like buttons.

Generate the login component, import Angular Material form field and input modules, configure routing to show the login view, and implement a login form with email and password.

Create and wire a create account component in an Angular app, edit its HTML and CSS, set up routing, enabling navigation between login and create account page with router link.

Initialize the npm project, install express, and create app.js to build the back end API for your Angular project, then run the server on port 3000.

Install mongoose and define a user schema with email, password, and user id, then export the user model in Node.js to set up for the next video.

Implement login logic by extracting the email and password from the request body and retrieving the user by email. Decrypt the stored password and return success or error on mismatch.

Create a free cloud database with MongoDB Atlas and connect with Node.js. Add a database user, enable network access, create the database and the users collection, and test the connection.

Implement post-login redirects in an Angular app by creating a home component, configuring the home route, storing the user in a user service, and persisting login with local storage.

Create the coding page in an angular app by generating the coding component, configuring assets in angular.json, importing the editor module, and wiring the editor for code input and output.

Create a backend execution endpoint to run code online via a free code execution API, securely handling client secrets and forwarding results with Axios in Node.js.

Create and manage fiddles with a field service and http client to post, get, update, and delete fiddles, load them on init, and navigate to details with router links.

Build a stack overflow clone in Angular by creating components, routing, forms, and services to post and browse questions, view solutions, and vote using Angular Material.

Install node.js and angular cli, initialize a new angular project named StackOverflow with routing and css (or scss/less), install dependencies, and run the development server at localhost:4200.

Generate and style top bar component using the app-top-bar selector, wrap it in a container with flex layout, apply branding and orange StackOverflow styling, and reset margins in global styles.

Create a login page by generating a login component, using angular material form fields and inputs, and configuring routing to display /login with pathMatch: full for the empty path.

Generate the create account component, configure the /create-account route, and test it in the browser. Reuse the login template, add a username field, and enable links to /login and /create-account.

Implement login and logout in an Angular app by persisting the user in a shared service and local storage, and conditionally display the logout button with router navigation.

Learn the template of the home page, including match and material cards, a text area form for posting questions, and card-driven navigation to the question and solution space.

Bind the text area to a question model, construct a question object with username, the question, and an empty solutions array, and post to /questions with the question service.

Create an Angular solutions page. Generate a solutions component and configure a view solutions route with a dynamic question id, displaying upvote/downvote cards and a solution post field.

Post answers by building a new solution with the username and text, including empty uploads and downvotes, and update the question via a put request.

Display solution data dynamically in an Angular app by looping through question.solutions, rendering each user and their solution, and computing total words from upwards minus downwards, with async data handling.

Learn to implement and visualize upwards and downwards voting in an Angular app by tracking user IDs in solution upvotes and downvotes, updating the server, and applying color feedback.

Install and integrate angular material, set the indigo pink theme with typography and animations, import the material button module, and test a raised button in the app.

Create a boards component under pages/boards with a container and new board button, plus sample cards and a delete icon button using Angular Material.

Learn to implement a mat dialog in angular material to add a board. Open the dialog, enter a board title via a form field, and choose create or cancel.

Learn angular routing to navigate multiple pages using paths and a router outlet, redirecting the empty path to the board page and displaying the view board component for details.

Explore angular services and local storage to share data and persist boards, then create a new board and navigate to its view using template-driven forms.

Expose the board service to the template and render boards with ngFor to display dynamic data. Use localStorage to persist boards and routerLink to the board details page by index.

Create the view board template from a prior component in VS Code, including a title, a list of Angular Material checkboxes, and edit and delete actions.

Learn to add and delete tasks in a new Angular card component by managing a title and tasks array, with ngFor and ngModel bindings and add/delete logic.

Fix create card focus by separating tasks for looping, and implement a dialog-based flow to add a new card on the board with title and checklist, then update local storage.

Install Angular Material in your project using the command, then set a theme and enable typography and browser animations. Import the Material module, recompile, and verify with a Material button.

Create the top bar component in an Angular app, generate the component, wire its HTML and CSS, and brand the app as Stevia to show the top bar works.

Create a functional home page in an Angular app by generating a home component, adding a username input and start button, and including a styled leaderboard for the trivia.

Create an Angular service to fetch data from an API using HttpClient, expose a method to get data, subscribe in a component, and share questions across the app.

Implement a 15-second countdown timer in Angular. Use setInterval to update, pause on answer, reset for questions, and handle timeouts by showing the correct option and returning home.

Set up a mock api with json server to store leaderboard scores, create db.json with username and score, and run on port 3000 with /leaderboard supporting get, post, put, delete.

Track user name with Angular forms input and bind it to a service. Learn to check leaderboard for scores, post entries, update high scores with put using the entry ID.

Build a simple blogging app in Angular, covering components, services, two-way binding, and the HttpClient module, with Angular Material and Validator text editor for blog creation and viewing.

Set up a real-world Angular project by installing Node.js, installing the Angular CLI, creating a new project with routing, choosing CSS, and running ng serve to launch on localhost:4200.

Fetch block data from a server with a blog service, return an observable, and subscribe to display blocks on the home page using ngFor and template interpolation.

Bind the blog view with template binding, fetch the blog data by index from the route, and render the title and html content after data loads.

Add comment functionality in an Angular blog: bind username and comment inputs, push to comments, update via an HTTP put request, and render comments with ngFor.

Build an IMDb-like app using Angular by creating components and configuring routes, and consume the TMDB API to show top-rated movies, a search bar, and detailed movie views.

Install node.js and angular cli, create a new angular project with ng new, enable router and css. Run ng serve and view at localhost:4200 to begin building components.

Create and integrate the top bar component in an Angular app, using the app-bar selector, and build a three column bar with branding, a search input, and a minimal layout.

Create a new home component and route it to /home with a router outlet, then display a grid of movie cards with images, titles, and ratings.

Create an Angular service to share methods and data across components. Inject HttpClient, fetch data from an API, subscribe to the observable, and log results in the home component.

Implement an http call to search movies using the IMDB API key, with a debounced input pause, a get request, and an observable with subscribe to handle responses and errors.

Learn to build a movie search in Angular by binding input with the forms module and ngModel, debouncing input, and calling the movie service searchMovies to fetch results.

Develop an Angular movie details page that pulls title, budget, overview, rating, runtime, year of release, and production companies from the API docs, and present a padded, flex-based layout.

Master template binding in Angular to display movie details from a movie object, including poster, title, runtime, rating, and overview, with ngIf guards and router navigation.

Execute an http call to fetch movie details in angular by calling a movie service, extracting the id from the url with activated route, and handling responses and errors.

Explore building a three-page Angular recipe library app with a homepage search, results, and detail views, using components, routing, and services to call the Spoon API.

Generate the home component in an Angular app, wire it to the app module, and style a full width, full height container with a background image and a search box.

Style the search box on the home page and configure routing with a router outlet and a default redirect to the home page.

Bind the home page search input with ngModel from the forms module, then navigate to the results route with the query when the user clicks search.

Explore the Spoonacular API to search recipes, fetch recipe details and instructions, using query parameters and an API key, within a free tier of 150 points per day.

Learn how to create an Angular recipe service, use the HTTP client to perform a get request, and subscribe to an observable to fetch and display search results.

Read the query from the route, fetch search results with a service, and display them as image cards with titles on a template in Angular.

Fetch recipe details from the food recipe API using the get recipe information endpoint with the recipe id, including the title, image, and ingredients, then retrieve the step instructions.

Extract the recipe id from the route param with activated route in Angular, fetch details and steps, and bind title, image, ingredients, and steps using ng-for and ng-if.