Angular 5 [ngClass] для изменения языковых настроек

Question

Следующий статический HTML <ul> выпадающий (со стилем, включенным ниже) работает отлично. Теперь я пытаюсь преобразовать это в динамический Angular 5 <li> с помощью *ngFor* а также 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>

Angular версия выглядит так, но я не могу получить верх <a href> флаг для отображения при загрузке (ни когда я повторно выбираю язык).

Если вы посмотрите на снимок экрана ниже, вы увидите, что мой начальный флаг не отображается в верхней части <ul> где это говорит US, Я думаю, я должен справиться с этим @ViewChild() но я не уверен - или, возможно, с @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;
  }