I'm curious if there is a way to create an isolated scope for an object in my HTML within a component in my Angular 2 application. For instance, imagine I have the following object in my component's TS file:
private myObj = {
nestedObj1: {
nestedObj2: {
nestedObj3: {
name: 'George',
height: '72 inches',
birthday: 'February 31',
position: 'Engineer',
favNums: [1, 2, 3, 10, 20]
}
}
}
};
Is it possible in my component's HTML to do something like this:
<div *let person = myObj.nestedObj1.nestedObj2.nestedObj3"> // THIS PART!!
<h2>{{person.name}}</h2>
<ul>
<li>{{person.height}}</li>
<li>{{person.birthday}}</li>
<li>{{person.position}}</li>
</ul>
</div>
Similar to how you can use an ngFor loop like this:
<div *ngFor="let num of myObj.nestedObj1.nestedObj2.nestedObj3.favNums">
<p>{{ num }}</p>
</div>
Any thoughts on this would be great.