Skip to main content

Posts

Angular 12+ multi language

 I wrote a similar post that works for Angular 8, 9, 10, 11. Click here for the previous post. In Angular 12+ the config seems to be a bit different. 1. Create an angular web project. we will start by creating a project with minimal setup to demonstrate. To create an angular app, in command prompt type: ng new multiLanguageApp Open "app.component.html" delete the default code and paste this code: < div >    < a   href = "/" > de </ a > &nbsp;    < a   href = "/en" > en </ a > </ div > < div > Danke! </ div > Run "ng serve" to serve your app. Go to localhost:4200 you should see: I am creating an app with German as the default language and English as the second language. "Danke" is a word in German means "Thank you". When we click "de" or "en" in the UI to switch language, we expect this word to change respectively. 2. Set up i18n and translate. In the tag...
Recent posts

Be careful if you are using MaterializeCSS

  If you are using MaterializeCSS  you might want to check if these functions are working properly. 1. Select on iOS The tapped option is not selected. The option before or after is being selected. How to fix:  https://github.com/Dogfalo/materialize/issues/6464 2. Using Modal in SPA: If you are using MaterializeCSS with a SPA framework like Angular. When your modal is open if users click the back button in the browser or use the back key on mobile devices,  your model will not automatically close. How to fix: when a pop event happens close opening modals. import { PlatformLocation } from '@angular/common'; this. platformLocation  .onPopState((event) => {     // close openning modals }); 3. Using Dropdown on iOS It's very hard to choose an item on a dropdown on iOS, I think it's because the dropdown disappears too fast after selecting. How to fix: try to add option outDuration: 500 when init the dropdown. 4.  Preselecting a tab I don't know if ...

How to make a website without knowing how to code

Nowadays, you can make websites without knowing how to code at all. You can even make really good websites with little effort. There are a lot of tools out there to help you build websites without coding. When you know the recipe you can apply it to other similar tools. Today I'll show you how it's done with Google Site then I'll give you other good options to choose from. Before we start, let me tell you what kind of websites you can make with these tools. Website to provide your company information, websites to sell your products, blogs, websites for your organization,... basically all kinds of websites to display images, texts, audio, information. What kinds of websites you can not build using these tools? Websites that highly customized for specific needs like websites to convert video extensions, websites to make QR codes,... kinds of websites providing tools. This is a demo site I made within 10 minutes:  https://sites.google.com/view/ght-coin/home  . 1. Create a Goog...

How to add a custom domain for your Google site

 First of all, you will need a domain, you can buy it from a domain provider like GoDaddy , it's really simple, you just buy it like any online product, they will send you an account to log in to your domain manager. After you have a domain, go to your site editor, click on the setting icon (the wheel icon), and select Custom domain. Click Start setup then click Use a domain from a third party, Click Next. Fill in your domain, if it has not been verified before, you will see an error telling you to verify your domain, click verify your ownership. Now it will take you to the domain verification site, select your domain provider, you will have 2 ways to verify your domain, by adding a TXT record or a CNAME record. First way: Add a TXT record: Login to your domain manager. Copy the TXT from the verification site and create a TXT record in your domain manager. Your domain manager might look different from mine but it should be similar. Make sure you choose the record type TXT and past ...

SEO with Angular, add title, meta keywords, a must-do thing for your website

  For those who don't know what SEO is, SEO stands for Search Engine Optimization, it helps people discover your site through search engines like Google, Bing, ... Take a look at the below picture: To let search engines discover your site, you must let search engines know your site, for google you can use Google Search Console  but that's another topic, I assume search engines already know your site. The 3 most important factors are URL, title tag, and meta tag (description, keyword,...). Search engines will look for those 3 things (and many other factors) to compare with the search query and decide whether your site is relevant or not. Url Try to use meaningful URLs. For example, instead of using a URL like https://yoursite.com/products/1 use https://yoursite.com/products/iphone or even better https://yoursite.com/iphone . You can achieve this by configuring your rooting modules. To make slug URLs you can strip accents your product names and join them with a hyphen (-). For e...