title: Angular - Access values of object stored in array of objects inside template
body: <p>I've got a single class as below:</p>
  
  <pre><code>export class SettingsTab {
    id: number;
    class: string;
    name: Object = {};
  }
  </code></pre>
  
  <p>Also I mock it into simple array:</p>
  
  <pre><code>export const SETTINGSTABS: SettingsTab[] = [
    { id: 1, class: 'classOne', name: [{ "pl": "Tekst po polsku" }, { "en": "Text in english" }] },
    { id: 2, class: 'classTwo', name: [{ "pl": "Tekst po polsku" }, { "en": "Text in english" }] },
    { id: 3, class: 'classThree', name: [{ "pl": "Tekst po polsku" }, { "en": "Text in english" }] }
  ];
  </code></pre>
  
  <p>Now I would like to access certain value of name object in my template depending on which language I currently use. I get info about current language from localStorage as shown below:</p>
  
  <pre><code>language = localStorage.getItem('currentLang') != null ? localStorage.getItem('currentLang').replace("'", "") : "pl";
  </code></pre>
  
  <p>I managed to achieve it by code listed below:</p>
  
  <pre><code>&lt;ng-container *ngFor="let name of settingsTab.name"&gt;
    &lt;ng-container *ngFor="let key of ObjectKeys(name)"&gt;
      &lt;span *ngIf="key == language"&gt;{{ name[key] }}&lt;/span&gt;
    &lt;/ng-container&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>ObjectKeys are defined in my component as:</p>
  
  <pre><code>ObjectKeys = Object.keys;
  </code></pre>
  
  <p>But my question is there any easiest way to achieve what I want to do? Don't like two ng-components with *ngFor inside them. Also would like to achieve it in the most optimized way.</p>