title: How to initialize an interface that contains a sub interface
body: <p>A variable that is in a sub interface is undefined. How can I initialize all the variables of an interface including sub interfaces.</p>
  
  <p>I tried to use extends, but it still did not work.</p>
  
  <p>Interface</p>
  
  <pre><code>export interface UserModel {
  
          username?: any;
          email?: any;
          first_name?: any;
          last_name?: any;
          profile?: ProfileModel;
  
  }
  
  interface ProfileModel {
  
          nome_empresa?: any;
          cnpj?: any;
  }
  </code></pre>
  
  <p>Component</p>
  
  <pre><code>export class PerfilComponent implements OnInit {
  
    user = &lt;UserModel&gt;{};
  
    constructor(private perfil: PerfilService) { }
  
    ngOnInit() {
  
      this.perfil.get().subscribe((perfil) =&gt; {
        this.user = perfil;
      })
  
    }
  </code></pre>
  
  <p>In Template</p>
  
  <p>PerfilComponent.html:61 ERROR TypeError: Cannot read property 'nome_empresa' of undefined</p>
  
  <p>PerfilComponent.html:61 ERROR TypeError: Cannot read property 'cnpj' of undefined</p>