access the properties of an object inside an object class which is also inside an object class

Question

How do we access the properties of an object inside an object class which is also inside an object class?

Here I can access test.company.phone but not the test.company.company_name.company_id in the ng.html file?

 public test: Employee = {
    emp_id: 0,
    name: 'test',
    surname: 'test2',
    company: {
      c_id: 12,
      company_name: [{ company_id: 101, name: 'abc' },{ company_id: 101, name: 'abc' }] 
      phone: '+665589898',
    },
  };

Answer 1

The test.company.phone property is a string, which means there is only one value ('+665589898') and company.company_name property is an array of objects. So you need to iterate through the array with NgFor directive or access it by index with string interpolation like the code below:

<div>First company name{{ test.company.company_name[0].company_id }}</div>
<div>Second company name{{ test.company.company_name[1].company_id }}</div>