Angular 18: Video Blog, i18n, Firebase, internationalization

In this episode, we will configure the About Us component. We will create a responsive component using Angular Material and style it with the help of CSS.

We will prepare the footer of our application using Angular Material.

We will prepare the contact page of our application using Angular Material.

In this section, we will start working on the homepage of the application, which will display YouTube videos in the form of cards. We will learn how to embed YouTube videos on our page, specifically how to display an iframe. We will create an interface for our videos in the Angular TypeScript file and will try to dynamically display our videos using ngFor.

In the next section dedicated to the Home component, we will finish implementing dynamic video display, with the video data stored in the TypeScript file of our component. We will learn about the purpose of SafeUrl and how we can handle YouTube links. Finally, we will focus on styling the component using CSS.

In this section, we will see how Angular Material can help us create a paginator for displaying our videos on the homepage. Using Angular Material's powerful and customizable components, we can easily implement a pagination system that enhances user experience by organizing content into manageable pages. This approach ensures that the videos load efficiently and the layout remains clean, even with a large number of items.

In this part, we will complete the implementation of our paginator. Additionally, we'll explore how to create a custom pipe for our safeUrl, which will help us resolve the issue of videos refreshing when hovering the mouse cursor over our paginator. By leveraging this custom pipe, we can ensure a smoother user experience and maintain consistent video playback behavior across pagination.

In this episode, we will create a new project in Firebase.

This is the second video dedicated to deploying our application on Firebase Hosting. We will see how to connect to our previously created project on Firebase.com from the console and how to release our production version of the application.

In this episode, we will start working on the internationalization of our application. We will install the necessary dependencies and begin configuring the angular.json file. We will add the i18n markers and use $localize in our application, which will facilitate the creation of translations later on. These markers will help identify text elements that need to be translated, allowing for a smooth and efficient localization process as we prepare the app to support multiple languages.

In this section, we will continue enhancing our application to support multiple languages. We will create the necessary XLF translation files and set up the required configuration to enable testing of the different language versions of our application on a local server. This process will lay the foundation for seamless localization and ensure that the app can be easily adapted to various languages, improving accessibility and user experience for a global audience.

In this part of the course, we will explore the i18n Extract and Merge tool for Angular, which streamlines the management of translation files in the XLF format. This tool automatically organizes translation files, making it easier to maintain their readability and consistency. Moreover, it provides a convenient way to merge translation files, eliminating the need to manually create new files with each content update.

In this lesson, you'll learn how to configure the firebase.json file to properly deploy an Angular application with internationalization (i18n) support on Firebase Hosting. We’ll walk through setting up language-specific rewrites and demonstrate how to build and deploy your i18n-enabled app, ensuring that users are served the correct version based on their locale. This lesson will help you manage multiple language versions of your application seamlessly with Firebase.