[newbie] How to add flags on Angular Fast

I am assuming you have already built your angular app.
ok.
As always lets cut to it.

Html syntax required:

// Lists country flags
<div *ngFor="let country of countries">
      <ul>
        <li class="item">
          <a class="flag-icon flag-icon-{{ country.code }}"></a>
          {{ country.name }}
        </li>
      </ul>
    </div>
// Hardcode flag
<div>
 <a class="flag-icon flag-icon-za></a>
</div>

The above sample code will list some flags that have been populated by the countries array. Here is a countries array I made you can use to get started.

 countries: Country[] = [
    {
      name: "South Africa",
      code: "za",
    },
    {
      name: "France",
      code: "fr",
    },
    {
      name: "Switzerland",
      code: "ch",
    }
]

Add this line of code from CDN in your index file’s <header> tag.

https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css

Should look something like this if you not sure.

You’re DONE!
If you are having any troubles you can take a look at
the repo goodbye , good luck and stay safe.