Angular 5 [ngClass] to change language settings

Question

The following static html <ul> dropdown (with style included below) works perfectly. Now I'm trying to convert this to an Angular 5 dynamic <li> using *ngFor* and ngClass .

<!-- LANG SELECT - TEST -->
<ul class="nav-item header-dropdown-list hidden-xs">
 <li class="open">
  <a href="#" class="nav-link dropdown-toggle my-1" data-toggle="dropdown" aria-expanded="true"> 
   <img src="./assets/images/blank.gif" class="flag flag-en" alt="United States"> <span> US</span> 
   <!-- <img src="./assets/images/blank.gif" [ngClass]="getSelFlagClass(lang)" alt="United States" #selectedLanguage> <span> US</span>  -->
   
  </a>
  <ul class="dropdown-menu pull-right">
   <!-- <li *ngFor="let lang of translate.getLangs()" 
    [class.active]="clicked === lang"
    [value]="lang" 
    (click)="lang === translate.currentLang" >

    <a href="#"><img src="./assets/images/blank.gif" [ngClass]="getFlagClass(lang)" alt="United States"> {{lang}}</a>
   </li> -->
   <li class="">
    <a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-en" alt="United States"> English (US)</a>
   </li>
   <li>
    <a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-fr" alt="France"> Français</a>
   </li>
   <li>
    <a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-sp" alt="Spanish"> Español</a>
   </li>
   <li>
    <a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-de" alt="German"> Deutsch</a>
   </li>
   <li>
    <a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-jp" alt="Japan"> 日本語</a>
   </li>
   <li>
    <a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-cn" alt="China"> 中文</a>
   </li> 
   <li>
    <a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-it" alt="Italy"> Italiano</a>
   </li> 
   <li>
    <a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-pt" alt="Portugal"> Portugal</a>
   </li>
   <li>
    <a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-ru" alt="Russia"> Русский язык</a>
   </li>
   <li>
    <a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-kr" alt="Korea"> 한국어</a>
   </li>
  </ul>
 </li>
</ul>

<style>
 
 .flag {
  width: 16px;
  height: 11px;
  background: url(./assets/images/flags.png) no-repeat;
  margin-top: -.18em;
  display: inline-block
 }
 
 .flag.flag-en {  
  background-position: -144px -154px
 }
 .flag.flag-sp { 
  background-position: -16px -44px
 }
    /* additional flag styles omitted */

 .flag {
  text-transform: capitalize;
  display: inline-block;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  margin-top: -3px
 }
 
 @media (min-width: 768px) and (max-width:979px) {
  .flag+span {
   max-width:30px!important
  }
 }
 

 .header-dropdown-list {
  list-style: none;
  float: right;
  position: relative;
  margin: 0;
  padding-left: 0;
  padding-right: 0
 }
 </style>

The Angular version looks like this, but I cannot get the top <a href> flag to display on load (nor when I re-select a language).

If you look at the screen shot below, you'll see that my initial flag is not displayed at the top of the <ul> where it says US. I'm thinking I should handle this with @ViewChild() but I'm not certain - or perhaps with @HostBinding().

<ul class="nav-item header-dropdown-list hidden-xs">
 <li class="open">
  <a href="#" class="nav-link dropdown-toggle my-1" data-toggle="dropdown" aria-expanded="true"> 
   
   <img src="./assets/images/blank.gif" [ngClass]="getSelFlagClass(lang)" alt="United States" #selectedLanguage> <span> US</span> 
   
  </a>
  <ul class="dropdown-menu pull-right">
   <li *ngFor="let lang of translate.getLangs()" 
    [class.active]="clicked === lang"
    [value]="lang" 
    (click)="lang === translate.currentLang" >

    <a href="#"><img src="./assets/images/blank.gif" [ngClass]="getFlagClass(lang)" alt="United States"> {{lang}}</a>
   </li>
  </ul>
 </li>
</ul>

  getFlagClass(sel){
    return "flag flag-" + sel;
  }
  getSelFlagClass(sel){
    // i.e.  class="flag flag-us"
    return "flag flag-" + sel;
  }