Angular 17 for Juniors: Building Real World Application

Install Homebrew, a Mac package manager, using the command from the Homebrew website. Open the terminal, paste the command, and complete the installation to access packages like Node or NVM.

Install node js and use nvm to manage node versions across projects, and switch versions with nvm install and nvm use.

Install the angular cli with npm install -g to enable creating components, services, and apps in angular. Verify installation with ng --help and troubleshoot permissions if needed.

Create a new Angular project named Ng Flix using ng new in the applications folder, select scss and no server side rendering, then npm installs and git version control.

Run the Angular app with ng serve to start a virtual web server, bundle TypeScript into JavaScript, view the app at localhost 4200, and see the default page.

Install and open Visual Studio Code, select your operating system, and open the NG Flix project folder to begin editing the code.

Install and configure Editorconfig and prettier to standardize code formatting across developers, including setting up dot prettier rc and enabling format on save.

Explore what an API is as the middle layer between front end and back end, using a restaurant waiter analogy to show how HTTP requests fetch data from a server.

Explain how JSON drives data exchange between front end and back end, detailing objects, keys, and values, and show how Angular requests deliver and render data.

Register for the Movie Database api key and learn to fetch movies with a get request, returning a json list with id, title, overview, genres, language, and posters.

Explore consuming ready-made APIs and how front-end apps call back-end APIs with NodeJS, Ruby, PHP, or C#. Learn to use APIs, read documentation, manage keys, and display current data.

Create a fixed header and footer with a logo and navigation; content changes via routing using header, logo, and content components with a slider and movie and tv show categories.

Learn how to install and apply Google Fonts in an Angular project by integrating Roboto, using a link or import, and applying global versus component styling via styles.css and index.html.

Reset the browser default CSS to unify styling across Chrome, Opera, Edge, and Safari using modern normalize installed via npm and imported at the top of your styles.

Build and style an angular 17 header with a logo from assets and navigation using flexbox to align four items: home, movies, tv shows, genres.

Generate an Angular footer component in the shared folder beside the header. Use the date pipe to show the current year and style the footer with flex-centered, white text.

Explore building an Angular home page component with a slider and banners for popular movies and top shows, then route to a movie list component via router outlet and routerLink.

Build a dynamic slider component that loops slides with a background image and a content pane showing the movie title, rating, votes, release date, and description.

Style the slider component using scss with ampersand syntax, implement a full screen slide background, overlay a gradient, and position text with rem-based responsive sizing for a real-world Angular app.

Install and use an icon library in an Angular app, focusing on Prime Icons, import it into styles.css, and use pi star fill and other icons for the interface.

Fetch popular movies data in an Angular app using http client services, ngOnInit, and subscribe, with the api key in the url and proper HttpClientModule imports.

Learn to create a shared Angular service, inject HttpClient, and expose get popular movies as an observable to be consumed by multiple components, with provided in root versus manual providers.

Use the async pipe to render observables in the template, using the http service to fetch popular movies and avoid subscribe for a cleaner reactive flow.

Use ngFor in Angular to loop over items and render dynamic slides from movie data. Extract the array from a results object returned by the API to avoid hard-coded HTML.

Explore ngIf for conditional rendering in Angular, using boolean conditions like array length to display elements only when met, with non-rendered items removed from the DOM.

Learn to loop over the API's movies results with ngFor, async pipe, and ngIf to build slides for the header, displaying each movie's original title.

Define a strict movie model with TypeScript typings to replace any, aligning frontend types with the backend API response, using a types folder for movie.ts and movies DTO.

Learn how to replace hard-coded slide data with real API data, render each movie as a slide with its title, vote average and release date, and adjust layout for responsiveness.

Learn to implement smooth slide animations in Angular by importing the browser animation module, defining slide fade with trigger, states, and transitions, and applying it to a slider.

Refactors angular app to fix a white screen by resetting the slide index, adds a change slide method, uses a date pipe, and centralizes image base URL and API keys.

Create a show item component in Angular 17 for juniors to render cards with images and ratings, style with flex and grid, and use a global container.

Fetches upcoming movies via the movie service and displays them in a dynamic banner using an observable and async pipe with ngfor over the upcoming movies results.

Learn to create smart components by using inputs to pass a show item into a child, handle null data with TypeScript, and conditionally render with ngIf.

Learn to reuse an Angular banner component by passing title and movie data for upcoming and top-rated movies using inputs and async data binding.

Refactor service methods into a single get movies by type function, replacing multiple endpoints with a parameterized approach, and update components to use the new API calls.

Limit the banner movies by slicing the results array and using an adjustable count with a default of 20, so the front end shows 12 or a chosen amount.

Build a TV shows banner by applying movie API pattern, add a TV shows DTO, and fetch popular TV shows to display with a name fallback when title is missing.

Learn to build a dynamic movie and TV show detail page in Angular 17 by parameterizing routes and using router links, with component libraries for headers, banners, tabs, and carousels.

Fetch the movie id from the route by injecting the activated route service and subscribing to the params observable in ngOnInit. Also consider the snapshot approach for immediate access.

Create a movie service to fetch data by id via http get, using the API URL, and render the movie details with the async pipe, while preparing for error handling.

Reuse the slider as a header on the movie detail page by making it dynamic through an input that accepts a movies array, instead of calling a service.

Deploy the is header input to toggle header mode and disable slide changes. Use dynamic components across home and detail pages.

Install the PrimeNG component library to add ready-to-use UI components like the tab view, and resolve conflicts by aligning Angular with PrimeNG versions.

Learn to install and theme a priming library in Angular 17, import styles, select a dark md indigo theme, and implement the tab view component on the show detail page.

Style the angular tab view to center tabs and color the bar for a movie app. Learn component-level and global styling, including ng-deep and a theming color variable.

Learn to embed a video in an angular app using an iframe, building a YouTube URL with the video key from the videos API and ensuring a safe resource URL.

Create a reusable video embed component in Angular, implement a safe YouTube URL with Dom sanitizer, and bind a dynamic key to render trailers in the videos tab.

Fetch movie credits from a dedicated API and display the cast in a responsive carousel, showing each actor’s name, character, and profile image with a fallback default image.

Create a default actor photo using if-else in the Angular template with ng-template named default actor photo to replace missing actor images from assets.

Learn to implement a movies page with a search bar, query by name, and pagination, while displaying top movies or newest-to-oldest results.

Explore how to use the movies and TV shows search API, including base URL, search endpoint, and query parameters like API key, keyword, include adult, language, year, and pagination.

Create a shows list component to replace the movie list, update routing and header links, and fetch the first page of all movies and TV shows from the service.

Show search api results and show item demonstrates how to fetch search results via the movie service in a shows list component, handling ng on init and async data.

Add a search input using the prime input text component with a left search icon, integrated in a grid, and import the input text module for styling.

Pass the clicked page number to the API by wiring the paginator event to get page shows, importing the paginator state type, and handling optional page values for one-based paging.

Pass the current search value into each pagination request to keep results across pages. Reset the view to show popular movies by default when no search is active.

Improve pagination by reading total results from the api response and wiring total results into the paginator, using the movies dto's total results and total pages to drive dynamic pages.

Build a genres page to browse movies by category, linking each category and loading movies via the route with a genres component and app routing.

Create a responsive genres page by placing category links inside a container class grid with 12 columns, styling each link with padding, border radius, and the primary color from CSS.

Fetch genres from the API by creating a genres observable and loading it via the movie service on init. Render genres with ng-for using genre.name.

Learn to fetch movies by genre with a service in angular 17, passing genre id and page number, map results, and display them with pagination.

Learn to deploy an angular app by building with npm run build, fix bundle size errors by editing angular.json budgets, and upload dist production files to a host subdomain.

Use FTP with FileZilla to upload the dist folder to a hosting server, replace the old index.html, and publish the Netflix domain so the app runs in a browser.

Create a public repository, upload the dist folder, and commit production files to deploy your app on GitHub pages using static html and a generated static.yml workflow.

Fix GitHub pages base URL by updating the index.html base href to include the Netflix subfolder, then redeploy with ng build and verify on GitHub pages.